使用CSS使元素高度固定且宽度按比例调整的效果实现
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本教程详解如何利用CSS技术确保网页元素在保持固定高度的同时，其宽度能够依据设定的比例自动调整，提升页面布局灵活性与美观度。
使用padding-top百分比可以实现宽度固定而高度按比例展示的效果。现在的需求是让一个包含video视频的盒子div的高度保持固定，而宽度如何根据比例自适应调整？解决后的效果如图所示：红框标注的部分即是在给定高度范围内自动调整宽度的效果。
CSS代码如下：
```
.content {
margin: 0 auto;
height: 79vh;
}
.video_box {
position: relative;
height: 100%;
overflow: hidden;
margin: 0 auto;
}
```
全部评论 (0)
还没有任何评论哟~
