图像放大 - 限制小图像

Question

我正在为我们的网站制作移动布局。我在论坛上发布了关于小图片的问题。 在我们的CSS中，我们设置了

width: 100%;

适用于大型图像，可以很好地缩放它们。但是，较小的图像会被炸毁并变得非常大且像素化。

是否有一种简单的方法可以防止较小的图像被极度放大？

Answer 1

您可以结合使用CSS和JS来实现结果。

你可以使用JS检测你的图像的宽度，如果它大于x，则为更大的图像应用CSS类，如：

.bigImage {
max-width: 100%;
}

如果图像在X宽度下，则应用类似的规则：

.smallImage {
max-width: 50%;
}

Answer 2

如果您的意思是想要将图片太宽到100％，而只留下较小的图片，则必须编写max-width:100%而不是width:100%。无需为较小的图像提供特殊课程。