: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; } }