【问题标题】：width vs max-width in responsive web design响应式网页设计中的宽度与最大宽度
【发布时间】：2013-01-27 09:17:53
【问题描述】：
在有关响应式网页设计的教程中，建议对图像使用 max-width:100% 以使其灵活。为什么我们可以为此使用 width:100% ？
【问题讨论】：
标签：
width
responsive-design
css
【解决方案1】：
我也有同样的问题，我想这是做了一个小实验后的答案：
width:100%; 无论发生什么都会缩放图像的宽度。
- 当
100% 大于该图像的原始分辨率时，图像会不断缩放，因此看起来很模糊。
- 当
height 分配给该图像时，宽度会不断缩放并因此被拉伸。
max-width:100%; 更仔细地缩放图像的宽度。
- 当
100% 大于该图像的原始分辨率时，图像会停止缩放并看起来很细腻。
- 当
height 分配给该图像时，宽度停止缩放并保持纵横比。
所以我认为这就是人们使用max-width 而不是width 的原因。
实验截图：here（草图为600 px * 432 px）
实验网页：here
【解决方案2】：
较小的图像，例如 200 像素宽的图像总是会扩展到父容器的宽度，在更大的屏幕上可能会更宽。因此，您最终会得到放大的图像，由于可见的伪影，这些图像很少看起来不错。