html如何让元素自动分配,css怎么让元素自适应屏幕大小

css怎么让元素自适应屏幕大小

发布时间：2020-06-09 14:01:37

来源：亿速云

阅读：261

作者：鸽子

在实现元素自适应屏幕大小之前，我们先来介绍一个css知识点。

元素的margin和padding属性的值(无论是上下边距还是左右边距)如果设置为百分比，都是以宽度为基准计算的。

也就是说，在已知宽高比的情况下，css虽然不能确定height的值，但是可以确定padding-top等属性的值。

实现思路：

1、算出宽高比(高 / 宽)，并设置为padding-top的值，height设置为0(由padding-top撑起元素的高度)。

2、此时元素的实际内容被挤到了下方，所以用绝对定位改变其位置。

(视频教程推荐：css视频教程)

实现代码：

html代码：

css代码：.ac_coupon-wrap {

height: 0;

padding-top: 15.16%;

position: relative;

.ac_coupon-content {

position: absolute;

top: 0;

width: 100%;

height: 100%;

background-size: cover;

}

}