css - 使用CSS根据容器宽度和图像的原始宽度设置图像宽度？

Question

有没有办法使用 CSS 获得以下效果？

• 当容器的宽度小于图像的原始宽度时，将图像的宽度设置为容器宽度的 100%。
• 当容器的宽度大于图像的原始宽度时，将图像的宽度设置为其原始宽度。

Answer 1

也许你可以这样做：

例如：

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

检查这个http://jsfiddle.net/aqh2r/

Answer 2

我发现下面的 CSS 代码可以达到目的。但是根据 CSS 标准，当 max-width 的值为百分比时，它是“相对于生成框的包含块的宽度计算的”。根据我的理解，将 max-width 设置为 100% 应该没有效果，但似乎是错误的。

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

该代码在 Firefox 12 和 IE 9 中进行了测试。请参阅http://jsfiddle.net/EnZEP/