需要准备的材料分别有：电脑、chrome浏览器、html编辑器。
1、首先，打开html编辑器，新建一个html文件，例如：index.html。
2、其次，在index.html中的<style>标签中，输入css样式代码：body {background: url(image7.jpg) no-repeatbackground-size: 250px}。
3、最后，浏览器运行index.html页面，此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。
解决这个问题的方法如下：
1、先在html里添加一个img图片标签。
2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。
4、设置后，看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。
6、这里设置后的效果，图片并没有变形。
7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。
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 的优先级是最低的，不过确实好用
