css 固定宽高比容器

申明： 本文参考 结一老师的文章 css中如何做到容器按比例缩放

 

核心思想：

给目标元素设置一个容器，设置高度为0，用垂直padding(百分比)来撑开高度，因为padding设置百分比时是基于容器的width属性的，我们再给目标元素设置绝对定位和100%宽高即可。

实现一个16:9的视频

demo代码如下：

<div class="wrap">
	<div class="left">
		<div class="inner">
			<img src="left.jpg" alt="">
		</div>
		</div>
	<div class="right">
		<div class="top">
			<img src="right-t.jpg" alt="">
		</div>
		<div class="bottom">
			<img src="right-b.jpg" alt="">
	    </div>
	</div>
</div>

.wrap{
	overflow: hidden;
	background-color: #efefef;
}
.left, .right{
	float: left;
	width: 50%;
}
.left > .inner{
	position: relative;
	padding-top: 100%;
}
.left img{
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	vertical-align: middle;
}
.right > .top{
	position: relative;
	padding-top: 67%;
}
.right > .bottom{
	position: relative;
	padding-top: 33%;
}
.right img{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;　　　　 vertical-align: middle;}

 

来源：https://www.cnblogs.com/walle2/p/4894190.html