带有图像和侧面部分的 CSS 响应式布局答案

【问题标题】：CSS responsive layout with an image and a side section带有图像和侧面部分的 CSS 响应式布局
【发布时间】：2021-11-26 15:31:11
【问题描述】：

布局描述：图片和侧面部分放在一个叫做卡片的容器中

侧面部分只是一个固定宽度为 300 像素的容器，其中包含一些信息文本和按钮。

图像应尽可能大，但不超过宽度大小的 100%（限制为视口宽度，高度无限制）。

如果(image_width + section_width <= viewport_width，图片以全尺寸显示，侧面部分显示在图片的右侧。

如果(image_width + section_width > viewport_width 图片显示在侧面部分上方。

在这两种情况下，卡片都是水平居中的。

我几乎做到了here，但还有2个问题（请先使用Chrome或Edge进行测试）：

I. 当viewport_width < 800px (the width of the image) 图像占据整个可用屏幕宽度时，其下方的侧面部分很好。

当viewport_width > 1100px + some small defaultmargin (image+width + sidebar_width) 以全尺寸显示时，侧边栏位于右侧。两者都很好地水平居中。

当800px < viewport_width < 1100px 侧边栏正确停留在图像下方但图像右侧有一些空间（下图屏幕截图中的黑色区域）

我想避免这种情况并在侧栏上方显示图像，就像在viewport_width > 1100px 的情况下一样，在这种情况下卡片容器的宽度应该具有图像的宽度并且卡片应该居中水平方向

有没有办法做到这一点？如果您有使用display: grid 或其他方法的解决方案，我会很高兴学习它。但我认为使用flex 也应该是可能的。

II.viewport_width > 1100px 案例中的居中在 Chrome 和 Edge（均为 94.0.* 版本）中有效，但在 Mozilla FF 中无效。为什么会这样？如何纠正？

在 Mozilla FF 中，屏幕截图中的黑色区域出现在图像和侧边栏之间，并且整个卡片容器从一侧拉伸到另一侧（不在中间居中）。换句话说， width: fit-content; 卡在 FF 中不起作用。为什么以及如何纠正它？

提前非常感谢！

【问题讨论】：

请分享Minimal, Reproducible Example
我已经这样做了：只需单击文本中的链接I almost achieved this here,

标签： html css flexbox responsive

【解决方案1】：

尝试添加图片的宽度
波纹管应该适用于两者

.card {
  display: flex;
  flex-wrap: wrap;
  background: silver;
  width: fit-content;
  margin: 0 auto;
}

.media {
  background: black;
  display: flex;
  width: fit-content;
  flex-grow: 1;
}

.media img {
  width: 100%;
}

.media>img {
  max-width: 100%;
}

.content {
  max-width: 300px;
}

<div class="card">
  <div class="media">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Curve_of_Nature.jpg/800px-Curve_of_Nature.jpg" alt="" srcset="">
  </div>
  <div class="content">
    <h2>Tools</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe atque possimus ad harum, veniam asperiores doloremque. Quod, eius qui? Libero, porro ipsam voluptate corrupti quo atque itaque totam ea quam.</p>
  </div>
</div>

【讨论】：

谢谢，但这并不是解决方案。我不想放大图像。我想将其显示为原始尺寸（如果可能），并且仅在它太大时按比例缩小。在此解决方案中，卡片始终为 100% 宽度，并且图像最终会被拉伸，这是我想要避免的。

【解决方案2】：

这是第一个问题的解决方案：

.container {
  display: flex;
  flex-wrap: wrap;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  justify-content: center;
  
  border: 2px dashed green;
}

.first {
  border: 1px dashed red;
}

img {
  max-width: 100%;
}

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Curve_of_Nature.jpg/800px-Curve_of_Nature.jpg" >
  <div class="first">LogaLogaLogaLogaLogaLoga</div>
</div>

第二个问题（关于fit-content not working in FF）的答案也在例子中：

为了在 FF 中工作，需要供应商特定的width: -moz-fit-content;。

【讨论】：