css - 使图像仅在较大时缩放到父 div，同时使用显式最大宽度

Question

我可以在较小的屏幕上响应父 div 来缩放图像，但仍然限制为明确的最大宽度:

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

但是，如果图像小于父 div，它仍然会被拉伸(stretch)以填充 div。

有没有办法在事先不知道图像尺寸的情况下，仅在图像较大时将其缩放至 100%，并在图像较小时保持其原始尺寸？

Answer 1

可以设置图片的max-width: 100%;只有当它比它的父级大时才会限制它的大小。

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

此处演示:http://jsfiddle.net/LMEwC/