实战经验

height: max-content;

在看农产品官网时，发现图标好像不是正方形，有点变形，然后打开调试查看样式，发现图片设置了宽度百分比，然后高度设置了auto

width: 25%;
height: auto;

当浏览器宽度变大的时候，发现实际展示的高宽比不一致了，就导致了，图标变形了

后面调试发现height有个属性可以设置很好的解决

width: 25%:
height: max-content;

设置 max-content 之后，图标的比例，就很好的根据宽度的大小来展示了