使 imgs 数组响应

Question

我的 img 布局如下：

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

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

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

有什么方法可以做到？

Answer 1

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

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>

使 imgs 数组响应

Making array of imgs responsive

css

responsive-images