使用CSS缩小（但不是向上）图像以适合IE9中的div容器（最大宽度：100％修复）

Question

我不能使用JS，这应该只归CSS归档。容器（DIV）是自动宽度（灵活）“table-cell”元素。

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

我使用下面显示的代码，但它只适用于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正在尝试的完全相同的事情。我正在回答任何可能降落在这里的人。在检查OP提到的http://jsfiddle.net/SAada/2/时，我发现了一个有趣的解决方案：

设置

height: auto;

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

max-width: 100%

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

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

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

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