使用CSS缩放图像但限制为原始大小

Question

对于响应式设计，我想缩小一些图像：

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

这可以正常工作，但如果屏幕宽度超过图像的原始尺寸，则会使图像爆炸。

有没有办法将此缩放限制为原始大小？那么只有在必要时才会变小？

提前感谢您的回答。

威廉

Answer 1

您可以使用max-width来防止图片宽度变得比原始尺寸大。

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

Answer 2

将图片放在<div>中，并为<div>提供最大宽度。

<强> CSS

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

<强> HTML

<div id="test">
    <img src="http://a.dilcdn.com/bl/wp-content/uploads/sites/8/2012/09/02-11.jpg" />
</div>

JSfiddle

Answer 3

不回答图像大小限制的比例错误，这可能有效：

img {
  max-height: max-content;
}