使 imgs 数组响应答案

【问题标题】：Making array of imgs responsive使 imgs 数组响应
【发布时间】：2017-02-14 05:33:34
【问题描述】：

我的 img 布局如下：

<div><img src='.. '><img src='...'> ... </div>

我希望将人的照片布置在单行站点中，并且在调整大小时它应该变得更小并且仅在水平框架上而不是环绕到下一行。我想只使用 CSS。

我今天阅读了许多技术（例如Responsive Images with CSS），但都只讨论单个图像。在这种情况下，这些技术似乎不起作用。

有什么办法呢？

【问题讨论】：

这取决于你想连续拥有多少张图片（width: 100% 用于包装，如果你为它们设置了 4 张图片width: 25%）.. 但如果你想动态地拥有它/o js 这是不可能的..
是的，它正在工作。我也加了height:20%。
@LiborZahrádka：完全可以使用 CSS，如我的回答所示。这只是我认为最好的方法，但绝不是实现这一目标的唯一方法。
与你使用百分比的结果相同..
@LiborZahrádka：除了你必须事先知道图片的数量才能选择正确的百分比值（或事后用 JS 设置），再加上不是基于百分比的， flexbox 实现可以更容易地修改，例如在元素之间添加空格。我已经更新了我的答案来说明这一点。

标签： css responsive-images

【解决方案1】：

对于未知数量的图像，您可以使用flexbox 自动在所有元素之间分配可用空间：

div {
  display: flex;
  width: 100%;
}
div > div {
  flex: 1;
}
div > div img {
  width: 100%;
}

<div>
  <div>
    <img src="http://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
  <div>
    <img src="http://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
  <div>
    <img src="http://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
</div>

此实现还可以轻松地在图像之间提供间距：

div {
  display: flex;
  width: 100%;
}
div > div {
  flex: 1;
}
div > div img {
  width: 100%;
}
div > div:not(:first-child) {
  margin-left:10px;
}
div > div:not(:last-child) {
  margin-right:10px;
}

<div>
  <div>
    <img src="http://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
  <div>
    <img src="http://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
  <div>
    <img src="http://i.stack.imgur.com/7nftf.jpg" alt="" />
  </div>
</div>

【讨论】：