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

Question

对于响应式设计,我想缩小一些图像:

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

这可以按预期工作,但如果屏幕宽度超过图像的原始大小,它会使图像爆炸.

有没有办法将此缩放限制为原始大小？如果有必要,它只会变小？

提前感谢您的回答.

威廉

Answer 1

您可以使用它max-width来防止图像宽度变得大于原始大小.

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

Answer 2

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

img {
  max-height: max-content;
}