让一排大图适合 flexbox答案

【问题标题】：Make a row of big images fit to flexbox让一排大图适合 flexbox
【发布时间】：2020-02-12 08:07:56
【问题描述】：

.d1 {
  background: lightblue;
  display: flex;
  padding: 5px;
}

img {
  flex: 1;
}

<div class="d1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

我想在 flexbox 内连续显示 5 个大尺寸图像。我希望所有图像宽度都适合当前屏幕，而不是在底部换行。我尝试了img标签的flex: 1、width: 100%的不同组合，但都没有奏效......

【问题讨论】：

"in a row" 与 "width to fit the current screen" 相矛盾 - 请更清楚您要达到的目标。
所有图像的总和以适合屏幕，不换行：|
你的 sn-p 没有包裹图片。
这解释了为什么您的图像不会调整大小：stackoverflow.com/questions/41774646/…。尝试将它们包装在一个 div 中并将图像的宽度设置为 100%

标签： css image flexbox

【解决方案1】：

取自 this answer 关于为什么图像在 flexbox 布局中不调整大小的原因：

弹性项目的初始设置是 min-width: auto。这意味着默认情况下，弹性项目不能缩小到其内容的大小以下。

这意味着除非给定宽度，否则图像不会缩小。为了解决这个问题，您可以将图像包装在一个 div 中（它将缩小以填充 flex 容器），然后将图像的宽度设置为 100%

.d1 {
  background: lightblue;
  display: flex;
  padding: 5px;
}

img {
  display: block;
  width: 100%;
}

<div class="d1">
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg"></div>
</div>

【讨论】：

【解决方案2】：

您需要证明容器的内容。然后，您可以为图像设置 flex-basis。我在这里使用了space-between，但任何other values 都可以使用。

.d1 {
  display: flex;
  border: 5px solid black;
  justify-content: space-between;
}

img {
  flex: 0 0 20%;
  width: 20%;
}

<div class="d1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
</div>

如果您不知道您将拥有的图像数量，那么我建议您将图像包装在一个 div 中，因为这样可以正常弯曲。

【讨论】：

【解决方案3】：

根据您在问题区域中提供的描述，我们认为您需要一个全宽容器和一个包含五个全宽图像的水平滚动条。

.scroll-wrap { border: 5px solid lightblue; width: 100%; overflow: auto;}
.d1 {display: flex; width: 500%;}
.d1 img{width: 20%;}

<div class="scroll-wrap">
  <div class="d1">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3c/Cityoflondon2019june.jpg">
  </div>
</div>

【讨论】：