所以建议使用padding属性来控制：
例如：
{
width: 35%
height: 0
padding-bottom: 35%
margin: 0 auto
}
这样可以绘制一宽度为屏幕的35%的正方形样式框，网页中直接使用此样式框并编辑框内内容即可！
设置对应图片的width和htight的具体数值就可以了。举例一个：1
2
3
4
5
6
img{
width:auto
height:auto
max-width:100%
max-height:100%
}
这样设置图片的话，可以使图片在指定的空间内缩放。
举例：
1
2
3
4
<div style="width:50pxheight:40px">
<img src="a.jpg">
<!--这里我们假如图片的实际尺寸是320X320-->
</div>
根据上面4个css可以知道：
图片被缩放后在div的尺寸是：
width:50px（因为图片的width:100%）
height:50px（这里height是在width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%就会发挥作用，
在max-height:100%的作用下，图片被缩放后在div的尺寸是：
width:40px
height:40px
这个尺寸符合max-height和max-width
css设置div宽高按照10/1显示，无论这个div的宽怎么变化，div的高都会是宽的十分之一，这就是 aspect-ratio 的作用，例如下面这个例子
假如说div的内容已经高于div显示的高度，那么div会根据内容的高度来显示，也就是说最小高度是宽度的十分之一，最高的就是按照内容的高度走
假如说就想跟着比例走，即使内容超出比例的高度，那该怎么做呢？很简单，加上 min-height:0 就可以了，这样就可以让高度不根据内容计算了，而是固定的数值
如果我们同时设置width和height，则aspect-ratio就不起作用了，就完全按照width和height设置的值显示
假如我们设置了最大的宽度时300px，因为是块状元素，宽度是展开一行的，并且高度是按照比例走的，那么高度就是30px
假如我们在标签上用width或者height属性， aspect-ratio 的优先级也是低的，例如:
最后结果还是按照标签属性上的width和height显示宽高，而不是 aspect-ratio 设置的1/1比例
综上所述， aspect-ratio 的优先级是最低的，不过确实好用
