使用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 也使用这种技术来处理响应式图像！