使imgs数组响应

Question

我的img布局如下：

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

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

我今天读过许多技巧（例如Responsive Images with CSS），但所有技术都只谈论单一图像。在这种情况下，这些技术似乎不起作用。

这样做的方法是什么？

Answer 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>