前言
在 web 网站开发中，有时候需要在
页面中
显示图片，而这些
图片的大小可能是不一样的。为了让这些
图片更加美观、协调，我们通常需要对它们进行等比例缩放。而使用 CSS，就能够轻松地实现这一目标。
具体
方法
在 CSS 中，有一种很常用的技术，即使用 max-width 和 max-height
属性，来将
图片缩放到
一个最大值。这样就可以同时保证
图片的比例不会失衡，且不会占用过多的
页面空间。
接下来，让我们来看一下具体的实现步骤。
第一步，首先需要在 HTML 中插入一张
图片，
代码如下：
<img src="example.jpg" alt="example">
在这个例子中，我们使用了 img
标签来插入一张
图片，并使用 alt
属性进行了简单描述。接着，我们将会使用 CSS 对这张
图片进行等比例缩放。
第二步，接下来需要在 CSS 中设置
图片的 max-width 和 max-height
属性，来限制它的大小。
代码如下：
img {
max-width: 100%;
max-height: 100%;
}
这里，我们将
图片的 max-width 和 max-height
属性都设置为 100%，这就意味着
图片的最大宽度和最大高度都不会超过它们的父元素容器。因而，
图片的大小就会
自动按比例缩放，协调地嵌入到
页面中。
结语
通过使用 CSS 中的 max-width 和 max-height
属性，我们可以轻松地实现等比例缩放
图片的目标。而这样的技术，不仅可以帮助我们更好地美化
页面，还能够提高网站的
用户体验。
