CSS是网页设计中少不了的技术，CSS可以让网页元素呈现出各式各样的样式，其中图片也是很常见的一种网页元素。使用CSS控制图片尺寸是一件很简单的事情，但有时候我们会发现，图片不按照预期的宽度比例缩放。
这可能是因为CSS中设置了图片的宽度和高度导致的。如果只设置了宽度而没有设置高度，图片会按照宽度比例自动缩放，但如果宽度和高度都设置了，图片就不会按照宽度比例来缩放了。
img {
width: 300px;
height: 200px;
}
上面的代码设置了图片的宽度为300px，高度为200px，这会导致图片不按照宽度比例缩放。要解决这个问题，可以只设置宽度或高度中的一个，让另一个属性自适应。
/* 只设置宽度 */
img {
width: 300px;
height: auto;
}
/* 只设置高度 */
img {
width: auto;
height: 200px;
}
上面两段代码分别只设置了宽度或高度，让另一个属性自适应。这样图片就会按照宽度比例缩放了。
除了上述方法，还有一种使用CSS的background-size来解决图片宽度比例缩放问题的方法。这种方法比较适用于背景图片的情况。
div {
background-image: url('image.jpg');
background-size: contain;
background-repeat: no-repeat;
}
上面的代码设置了一个div的背景图片，并使用background-size: contain;属性让图片缩放并保持比例，同时使用background-repeat: no-repeat;属性让图片不重复显示。
