响应式网页设计中的宽度与最大宽度

Question

建议在有关响应式网页设计的教程中使用max-width：100％的图像以使其灵活。为什么我们可以使用宽度：100％用于此目的？

Answer 1

我有同样的问题，我认为这是做了一个小实验后的答案：

无论发生什么，

width:100%;都会缩放图像的宽度。

• 当100%大于该图像的原始分辨率时，图像会保持缩放，因此看起来很模糊。
• 当为该图像指定height时，宽度会保持缩放，从而变得拉伸。

max-width:100%;可以更仔细地缩放图像的宽度。

• 当100%大于该图像的原始分辨率时，图像会停止缩放并看起来很精致。
• 当为该图像指定height时，宽度会停止缩放并保持纵横比。

所以我认为这就是人们使用max-width而不是width的原因。

实验的屏幕截图：here（草图图像为600像素* 432像素）

实验网页：here

Answer 2

较小的图像，例如200px宽的图像将始终扩展到父容器的宽度，在较大的屏幕上可以更宽。因此，由于可见的伪像，您最终会得到放大的图像，这些图像很少看起来很好。