使用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/