在IE9中使用CSS缩小(但不是放大)图像以适应div容器(max-width: 100%修复)

Question

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

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

我使用了下面的代码，但它只在IE7上工作。

max-width: 100%;
height: auto;
width: auto9;

我试图找到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用于响应式图像!