图片视频按照比例缩放
2019-05-30 本文已影响10人
smartHui
元素的内边距设置百分比数值。百分比数值是相当于父元素的width计算的。如果父元素的width改变，它们也会改变。
<div class="container">
<div class="banner-wrapper">
<img src="images/banner.jpg">
</div>
</div>
.container{
width: 100%;
}
.banner-wrapper{
padding-bottom: 56.25%;
position: relative;
}
.banner-wrapper img{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
}
核心思想：
提供一个容器，设置容器的高度为0，再设置padding-bottom或者padding-top为56.25%（因为padding的百分比是按照容器宽度计算的，所以由padding来撑开容器高度，而不是height，保证了容器的宽高比例），最后图片绝对定位，其宽高为容器的100%
