使用CSS缩小(但不是放大)图像以适应IE9中的div容器(最大宽度: 100%修复)

Question

我不能使用JS，这应该只由CSS存档。容器(DIV)是自动宽度(灵活的)“表格单元”元素。

我只想在宽度大于容器时缩小图像(用户可以调整窗口大小-这就是原因)。

我使用了如下所示的代码，但它只能在IE7上运行。

max-width: 100%;
height: auto;
width: auto\9;

我试图为IE9找到任何有效的修复方法，但都没有成功。

Answer 1

您的max-width需要设置为图像大小，然后将width设置为100%，如下所示：

img {
    width: 100%;
    max-width: 500px;
    height: auto;
}

当然，这意味着您的max-width必须根据正在加载的映像进行动态设置，这可能并不实用。

Answer 2

我偶然发现了这个老问题，当时我正试图做与操作员尝试的完全相同的事情。我为任何可能在这里登陆的人负责。在研究了OP提到的http://jsfiddle.net/SAada/2/之后，我发现了一个有趣的解决方案：

设置

height: auto;

将确保图像不会被拉伸/放大。同时，设置

max-width: 100%

将确保如果父元素宽度小于图像宽度，则缩小图像。

因此，对我有效的组合是：

img {
    max-width: 100%;
    height: auto;
}

哦，经过进一步的搜索，我发现Bootstrap也使用了这种技术来处理响应图像！