实现固定宽高比盒子的几种方案的总结

刚入职的时候，没有公司七牛上传图片的权限，页面嵌入图片的时候不能使用img标签,只能写一个盒子把图片写成背景属性，可是这样也失去了图片的自适应特性。为了能够让背景图片也能灵活适应，能够先根据图片的宽高比实现一个固定宽高比的盒子，而后background-size:100%,也能让图片不变形，因此总结了几种常见使用的固定宽高比的方案

padding-top or padding-bottom

方法简单，使用性很强，适用于大部分场景

div class="aspectration" data-ratio="16:9">
     <div class="content"></div>
</div>
复制代码

.aspectration {
    height: 0;
    width: 100%;
}

.aspectration[data-ratio="16:9"] {
    padding-top: 56.25%;
}
复制代码

结合calc

.aspectration[data-ratio="16:9"] {
    padding-top:  calc(100% * 9 / 16);
}
复制代码

结合伪元素

.aspectration:after { 
    content: ""; 
    display: block; 
    width: 1px; 
    margin-left: -1px; 
} 
.aspectration[data-ratio="16:9"]:after {
    padding-top: 56.25%; 
}
复制代码

css新特性 CSS Grid Layout

直接上代码

.aspectration {  
    display: grid; 
    grid-template-columns: repeat(16, 6.25vw); 
    grid-auto-rows: 6.25vw; 
    
} 
.aspectration[data-ratio="16:9"] .content { 
    grid-column: span 16; 
    grid-row: span 9;
}
复制代码

将来的新标准 aspect-ratio

还没有支持，能够借助PostCSS Aspect Ratio，实现基础跟第一种padding方式相同

总结：padding方式的实现适用性最为普遍，兼容性更好，至关于一种hack，网格实现比较复杂，只在现代浏览器支持，aspect-ratio方式最为优雅，语义更加明显，是将来的趋势。

参考自大漠老师的《css实现长宽比的几种方案》