h5背景图片不变形解决方案

昨天测试提了bug：说我的背景图片在不同手机模式下出现变形的情况，要求保证图片的原始效果

我的写法：

.img{
    background-image:url('');
    background-siza: 100% 100%;
}

由于盒子的高度是内容撑起来的，所有随着宽度的变化是保持不变的，况且图片的宽高比例是固定的，也没有好的方法去实时计算高度，所以这时候用cover，contain就达不到预想的效果，在我的不懈百度下，找到了一个特别容易的方式，只需添加一行代码即可搞定；

 

.img{
    background-image:url('');
    background-siza: 100% 100%;
    aspect-ratio：41/30；//宽高比为41：30
}

这样就实现了盒子高度随着宽度以一定比例变化的需求！