1、aspect-ratio宽高比例属性
aspect-ratio: 1 / 1; aspect-ratio: 16 / 9; aspect-ratio: 0.5; //等同于 1/2
如下效果将为每个box子元素设置aspect-ratio:3 / 2，如下图所示：
2、object-fit图片裁剪
- object-fit: contain; 保持宽高比，缩放保持图片完整性。
- object-fit: cover; 保持宽高比，填充元素的整个内容框。
- object-fit: fill; 不保证保持原有的比例，内容拉伸填充整个内容容器。
3、@supports判断浏览器是否支持css属性
@supports not(aspect-ratio: 3/2){
.layout .box{
height: 200;
}
}
以上代码就是为box设置aspect-ratio属性，通过特性查询看浏览器是否支持该属性，如果不支持该属性的，那么就为box元素设置固定高度即可。