0

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

<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

4

2 回答 2

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; }

​演示

于 2012-11-15T22:23:48.940 回答
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>
于 2012-11-15T22:28:53.867 回答