当margin/padding取形式为
百分比
的值时,无论是left/right,还是top/bottom
,都是以父元素的width
为参照物的
场景:购物平台商品的展示界面
当图片还未加载出来时,高度为零,加载出来后高度变化,出现一个闪烁的过程,影响用户体验。所以需要先进行占位,如上图所示。
使用margin/padding的百分比值来解决自适应高度的关键在于:容器margin/padding的百分比参照物是父元素的宽度,而容器的width的百分比参照物也是父元素的宽度,俩属性参照物一致,那么想要把这俩属性的值统一起来就很简单了。
若图片是宽高比是1:2的。
设置容器的padding-bottom/top
<div class="container">
<img />
</div>
.container {
width: 50%; // 父元素宽度的一半,显示两列。
padding-top: 100%;
}
给子元素/伪元素设置margin/padding撑开容器
若使用上面的方案,会导致max-height
失效。原因是容器的高度本来就是padding撑的,而内容高度为0,max-height
无法起作用。那想要优化这一点,唯一的方法就是利用内容高度来撑开而非padding,这个方案跟消除浮动所用的方案非常相似:给容器添加一个子元素/伪元素,并把子元素/伪元素的margin/padding设为100%,使其实际高度相当于容器的宽度,如此一来,便能把容器的高度撑至与宽度一致了。由于添加子元素与HTML语义化相悖,因此更推荐使用伪元素(:after)来实现此方案。
.container {
width: 50%;
position: relative;
overflow: hidden; //需要触发BFC消除margin折叠的问题
}
.container:after {
content: '';
display: block;
margin-top: 200%; //margin 百分比相对父元素宽度计算
}
向容器内部添加内容
上述方案只提及如何不依赖容器内容来撑开容器,那么,在撑开容器后,如何给容器添加内容(图片、文本等)呢?
答案很简单,那就是利用position: absolute;
img {
position: absolute;
top: 0;
width: 100%;
}