使用CSS缩小（但不是向上）图像以适合IE9中的div容器（最大宽度：100％修复） [英] Scale down (but not up) images using CSS to fit div container in IE9 (max-width: 100% fix)

问题描述

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

I cannot use JS, this should be archived by CSS only. Container (DIV) is auto width (flexible) "table-cell" element.

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

I'd want to scale image down only when it width is larger than container (user can resize window - that's the reason).

我使用下面显示的代码，但它仅适用于IE7。

I've used code shown below but it work only on IE7.

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

我试图找到IE9的任何工作修复，但没有成功。

I've tried to find any working fix for IE9, but without success.

推荐答案

您的 max-width 需要设置为图像大小，然后宽度至100％如此：

Your max-width needs to be set to the image size and then width to 100% like so:

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

当然，这意味着你的最大宽度必须根据正在加载的图像动态设置，这可能不实用。

Of course, this means that your max-width must be dynamically set based off the image being loaded, which may not be practical.

这篇关于使用CSS缩小（但不是向上）图像以适合IE9中的div容器（最大宽度：100％修复）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！