背景图片定比例填充容器,超出隐藏

知识点:子集元素 height:0;时 padding-bottom:100% 根据父级元素的宽度来计算。100%比例为1:1  66.66% 比例为 4:3  133% 比例为 3:4

 1 .backgroundimg>div{
 2     width: 100%;
 3     height: 0;
 4     padding-bottom:100%;
 5     padding-bottom:66.66%;
 6     padding-bottom:133%;
 7     overflow:hidden;
 8     background-position:center center;
 9     background-repeat:no-repeat;
10     background-size:cover!important;
11     -moz-background-size:cover;
12     -webkit-background-size:cover;
13     -webkit-transition:all .6s;
14     -moz-transition:all .6s;
15     -ms-transition:all .6s;
16     -o-transition:all .6s;
17     transition:all .6s;
18 }
原文地址:https://www.cnblogs.com/Millet-23/p/9305101.html