css++图片按比例缩小

CSS中如何按比例缩小图片？这是一个常见的问题，今天我们来研究一下如何用CSS完成这个任务。

img {
  max-width: 100%;
  height: auto;
}

如上代码，我们可以看到，我们是利用了CSS的max-width: 100%;和height: auto;来达到按比例缩小图片的效果。

我们先来讲一下max-width: 100%;，这个属性表示图片的最大宽度为浏览器窗口的宽度，也就是说，如果图片的实际宽度大于浏览器窗口的宽度，那么图片就会被缩小到窗口的宽度，这样就保证了图片不会超出窗口。

接下来，我们看一下height: auto;，这个属性表示，图片的高度会根据宽度自动缩放，以保证图片的比例不变。也就是说，图片的宽度被限制在了浏览器窗口宽度范围内，而高度会根据宽度自动缩放。这样就保证了图片的比例不变。

总结一下：max-width: 100%;和height: auto;结合使用，可以实现图片按比例缩小的效果，保证图片不会超出浏览器窗口，同时保证图片比例不变。这样，我们就可以很方便地在网页中运用图片了。