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

【问题标题】：Scale image with CSS but limit to orignial size使用 CSS 缩放图像但限制为原始大小
【发布时间】：2015-02-14 20:06:31
【问题描述】：

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

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

这按预期工作，但如果屏幕宽度超过图像的原始尺寸，则会炸毁图像。

有没有办法将此缩放限制为原始大小？这样它只会在必要时变小？

提前感谢您的回答。

威廉

【问题讨论】：

【解决方案1】：

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

img {
  max-height: max-content;
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

将图像放入<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>

【讨论】：