多个流体图像答案

【问题标题】：Multiple Fluid Images多个流体图像
【发布时间】：2012-11-04 14:47:35
【问题描述】：

我有一个简单的容器，里面有一张图片。

<div class="container" style="width:800px;">
     <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
</div>

如果我设置 img 样式max-width: 100%;，容器可以更改宽度并缩放其中的图像。完美。

但是，如果容器中有一些图像怎么办？像这样。

<div class="container" style="width:800px; background:red;">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg">
</div>

上面的代码不会执行任何缩放并溢出到下一行——扩展容器高度。

如何使用纯 CSS 使图像均匀缩放以适应固定宽度？有没有可能？

沙盒：http://tinkerbin.com/ijy5zgH3

【问题讨论】：

如果容器内的图片数量已知，比如3张图片，你大概可以设置.container img {width: 33%;}
@Neps 这就是问题所在，图像数量未知。唯一固定的值是容器的宽度

标签： css html responsive-design fluid-layout

【解决方案1】：

不理想，但在这种情况下，您可以保留img {max-width: 100%;}，但使用<table>

<table class="container" style="width:800px;">
    <tr>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
        <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td>
    </tr>
</table>

【讨论】：

这是我的后备计划！希望找到更优雅的东西。但我们用我们得到的东西工作！感谢您的帮助！

【解决方案2】：

如果您愿意更改 HTML 结构，这将起作用。

HTML：

<ul class="container" style="width:800px;">
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li>
</ul>

CSS：

img {max-width: 100%; }
li { display: table-cell; }

DEMO

【讨论】：

谢谢 Gurpreet。这也是一个很好的解决方案。希望避免表结构，但似乎没有其他办法。谢谢。