如何使用CSS使图像水平分布，使图像增长/缩小

Question

我想在一条水平线上有许多图像。问题是图像的数量是可变的，并且我更喜欢一般的解决方案&"；。认为这不会太难，并尝试使用flexbox:

<div id="thumbs">
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
</div>
#thumbs {   
width: 100%;
max-width:100%;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
img {
align-self: stretch;
flex-grow: 1;
flex-shrink: 1;
}

http://jsfiddle.net/Lq6z42hs/

当将#thumbs容器的大小调整为大于900px的宽度时，这可以很好地工作，因为图像被拉伸到新的宽度，这是我希望发生的事情。但是，将conainter的宽度调整为小于900px应该会使图像均匀地缩小到可用空间，但这并没有发生：它们保持在300px的宽度。如何使图像缩小？

Answer 1

我们简单地将每个<img>包裹在<div>中，并给每个img100%的宽度。

#thumbs {
width: 100%;
max-width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
#thumbs>div {
align-self: stretch;
flex-grow: 1;
flex-shrink: 1;
}
img {
width: 100%;
}

<div id="thumbs">
<div>
<img src="http://dummyimage.com/300x200/444/fff" alt="" />
</div>
<div>
<img src="http://dummyimage.com/300x200/444/fff" alt="" />
</div>
<div>
<img src="http://dummyimage.com/300x200/444/fff" alt="" />
</div>
</div>

Answer 2

您需要设置33.3333%的最大宽度。。。

#thumbs {
width: 100%;
max-width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
img {
flex-grow: 1;
flex-shrink: 1;
max-width: 33.3333%;
}

<div id="thumbs">
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
<img src="http://dummyimage.com/300x200/444/fff" alt=""/>
</div>

响应式演示