元素宽高比设置

做一个自适应屏幕的视频播放器,所以需要高度根据播放器宽度适应.
解决: 通过aspect-ratio设置元素宽高比

div{
	aspect-ratio:16/9; //表示元素的宽高比为16:9
}

但是有一些兼容性问题,然后由于ie11以下不支持这个属性,所以选了个替代方案
解决2:通过padding和定位
padding百分比是基于f父元素的宽度,用padding撑开元素高度,子元素高度百分比就基于撑开的高度,再用绝对定位设置位置.

.father {
	width: 100%;
	height: 0;
	position: relative;
	padding-top: 56.25%;
	background-color: yellow;
}

.child {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: red;
}
<div class="father">
	<div class="child"></div>
</div>