在使元素适应屏幕大小之前,请介绍css的知识点。
元素的边距和绘制属性的值是根据宽度计算的,如果设置为百分比(无论是上边距还是左边距)。
也就是说,在知道纵横比的情况下,css无法确定height的值,但是可以确定padding-top等属性的值。
实现想法:
1、计算长宽比(高/宽),设定为padding-top的值,height设定为0 ) (padding-top支撑元素的高度)。
2、此时,要素的实际内容被向下压入,所以在绝对位置改变其位置。
(视频教程推荐: css视频教程)
实现代码:
html代码:
css代码:
. ac_coupon-wrap {
height: 0;
padding-top: 15.16%;
定位:关系;
. ac_coupon-content {
定位:助手;
top: 0;
width: 100%;
height: 100%;
备份大小: cover;
}
}
推荐教程: css快速入门