为什么 max-width: 100% 在应用于 <img> 元素时会创建流畅的图像？

【问题标题】：Why max-width: 100% will create fluid images when applied to the <img> element?为什么 max-width: 100% 在应用于 <img> 元素时会创建流畅的图像？
【发布时间】：2014-04-18 01:49:56
【问题描述】：

在我看来，它只是“最大”宽度，那么为什么它会创建流畅的图像并占据其容器的全部空间？

谢谢。

【问题讨论】：

大多数情况下，图像大于最大宽度，如果它们更小，则不会这样。

标签： html css responsive-design

【解决方案1】：

它不会使图像“占据容器的全部空间”——它只是不允许 img 元素比它的容器宽。

如果图像的原始尺寸大于其容器，那么它将是全宽。如果它的原生大小小于它的容器，那么max-width:100% 将不起作用。

【讨论】：

【解决方案2】：

只要图像的宽度不超过其容器的宽度，图像就会以其原始尺寸呈现，而不是仅以其原始宽度渲染并溢出其包含框。

【讨论】：

【解决方案3】：

max-width 属性用于设置元素的最大宽度。

max-width: none;

（默认）没有最大宽度。

max-width: 100px;

以 px、cm 等为单位定义最大宽度（这是你的想法）

max-width: 80%;

定义包含块的最大宽度百分比

max-width: initial;

将此属性设置为其默认值。

max-width: inherit;

从其父元素继承此属性。

【讨论】：