:before {
content: "";
float: left;
width: 1px;
margin-left: -1px;
height: 0;
padding-top: calc(153 / 280 * 100%);
}
:after {
content: "";
clear: both;
display: table;
}
现代浏览器下没问题 但IE11下发现 比例出现bug 第一次进入 高度会被撑高很多而刷新后表现就符合预期
一番排查 发现是calc引起的bug
所以要么手动计算 要么可以用scss编译自动计算
@mixin myimg($height,$width){
$percentage:$height / $width * 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
&:before{
content: "";
float: left;
width: 1px;
margin-left: -1px;
height: 0;
padding-top: $percentage;
}
&:after{
content: "";
clear: both;
display: table;
}
}