自定义元素宽高比例（aspect-ratio）与@supports兼容支持和图片裁剪（object-fit）的用法

使用grid布局可以轻松实现响应式布局，子元素只需要设置最小宽度即可，如果对子元素没有设置高度，那么高度取决于内容的最大值，这样显然是不稳定的，如下图所示：

出现这种问题就造成布局混乱了，可能你最先想到的解决办法就是为子元素设置固定高度，这样显然是没有问题的，但是设置了固定高度之后，宽度可能是响应式的，高度固定了之后可能就会出现不协调的问题，如果想要达到这个目标，可以使用aspect-ratio宽高比例属性完成。

aspect-ratio宽高比例属性

aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;  //等同于 1/2

如下效果将为每个box子元素设置aspect-ratio:3 / 2，如下图所示：

真的非常方便，你可能会问，这么好用的属性，之前怎么不知道或者为什么市面上都不用这个属性那，那肯定是因为浏览器兼容的问题，我们来看一下mdn该属性浏览器兼容的版本，详细mdn文档介绍。

很明显看到了，谷歌88版本开始支持这个属性，也就是在2021年以后，所以这个属性早先没有人去用，那么现在马上2024年了，能否开始使用那？答案是肯定的，很多针对年轻用户的网站都开始逐渐使用该属性了，我开发的微信小程序项目“咸虾米壁纸”，页面布局就采用了grid网格布局和aspect-ratio属性搭建的页面，不但是微信小程序，抖音小程序，H5等都是支持的，下图是“咸虾米壁纸”项目，大家可以微信扫一扫体验一下这种布局，是否在你手机上支持。

那如果用户浏览器版本就是非常的低，那应该怎么办那，还有就是我这个项目打包了APP，经测试APP对该属性的支持也存在问题。我们其实是有兼容办法的，判断浏览器或应用是否支持该属性，如果不支持，我们就退而求其次，为它设置其他属性即可解决，下面代码就是解决方案。

@supports判断浏览器是否支持css属性

.layout .box{
    background: #66C7B4;
    border-radius: 8px;
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    aspect-ratio: 3/2              
}
@supports not(aspect-ratio: 3/2){
    .layout .box{
        height: 200;
    }
}

以上代码就是为box设置aspect-ratio属性，通过特性查询看浏览器是否支持该属性，如果不支持该属性的，那么就为box元素设置固定高度即可。
那么你可能会问，@supports又是个什么东西，浏览器到底对它支持不支持那，可以看mdn对@supports的详细介绍。

这个特性查询在2013年的谷歌浏览器就支持，所以大家可以放心使用。

object-fit图片裁剪

这个问题的产生是因为，我们页面列表中展现的图片有可能是用户上传的，用户传的图片有大有小，而且宽高比例也不准确，如下图所示，各种比例的图片。

.layout .box img{
   width: 100%;
   height: 100%;
}

假如给图片设置宽高，完全等于父级，那么就会出现图片拉伸或压缩的情况，如下图所示：

能看到有些本身比较高的图，明显给压瘪了，这样看起来就非常的不舒服，那么可以使用object-fit为图片设置裁剪属性。

.layout .box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

设置后，图片明显就恢复到自己原有的比例，只是超出的部分自动被裁剪了，保证图片在区域内完全填满，它的值类似于background-size。

• object-fit: contain; 保持宽高比，缩放保持图片完整性。
• object-fit: cover; 保持宽高比，填充元素的整个内容框。
• object-fit: fill; 不保证保持原有的比例，内容拉伸填充整个内容容器。