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

时间:2014-04-17 17:36:42

标签: html css html5 css3 responsive-design

从我的观点来看,它只是“最大”宽度,那么为什么它会创建流畅的图像并占据其容器的整个空间?

感谢。

3 个答案:

答案 0 :(得分:0)

它不会使图像&#34;占用它的容器&#34; - 它只是不允许img元素比它的容器宽。

如果图像的原始尺寸大于它的容器,那么它将是全宽。如果它的原始尺寸小于它的容器,则max-width:100%将无效。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

max-width: none;

(默认)没有最大宽度。

max-width: 100px;

以px,cm等定义最大宽度(这是您的想法)

max-width: 80%;

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

max-width: initial;

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

max-width: inherit;

从其父元素继承此属性。