html设置给div设置固定的宽高比例
时间: 2023-10-07 14:09:49 浏览: 138
可以使用 padding 或者伪元素的方式来设置 div 的固定宽高比例。
1. 使用 padding 方式:
```html
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 宽高比例 */
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
```
2. 使用伪元素方式:
```html
<div class="container">
<div class="content"></div>
</div>
<style>
.container {
position: relative;
width: 100%;
}
.container:before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 宽高比例 */
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
```
以上两种方法都是将 div 的高度设置为宽度的百分比,从而实现固定的宽高比例。其中 padding 方式需要设置父元素的 position 属性为 relative,而伪元素方式则需要使用 :before 或 :after 伪元素来实现高度的占位。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)