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

Posted 2023-03-06

【中文标题】响应式网页设计中的宽度与最大宽度

【英文标题】：width vs max-width in responsive web design

【发布时间】：2013-01-27 09:17:53

【问题描述】：

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

【问题讨论】：

两种规则都试过了吗？

【参考方案1】：

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

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

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

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

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

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

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

实验网页：here

【参考方案2】：

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