Question

我有一个带有图像的简单容器。

<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

Answer 1

如果您愿意更改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

Answer 2

不理想，但在这种情况下，您可以保留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 个答案: