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

Question

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

Answer 1

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

width:100%;无论发生什么，都会缩放图像的宽度。

• 当100%大于该图像的原始分辨率时，图像会不断缩放，因此看起来很模糊。
• 当height分配给该图像时，宽度会不断缩放并因此被拉伸。

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

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

所以我认为这就是人们使用max-width而不是width.

实验截图：这里（草图为 600 px * 432 px）

实验网页：这里

Answer 2

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