什么是 CSS 按比例调整图像大小？
在网页开发过程中，为了使内容更加美观，通常会在网站中使用图像来丰富视觉效果。然而，因为图像尺寸不一，所以如果直接显示可能会影响整体页面的美观度。这时，我们需要使用 CSS 按比例调整图像大小，以便将它们整齐地显示在网页上。
CSS 按比例调整图像大小，是通过控制图片的宽度或高度来完成的。与直接设置固定值相比，按比例缩放图像的好处在于，即使在不同分辨率或设备上显示网页时，图像仍然可以保持比例不变，从而提高用户体验和整体网站的外观。
如何使用 CSS 按比例调整图像大小？
使用 max-width 或 max-height 属性
在使用 CSS 按比例调整图像大小时，我们通常会使用 max-width 或 max-height 属性来限制图片的宽度或高度，并将另一个维度的尺寸设置为auto，这样可以使图像的宽高比自动调整。
以下是一个示例代码：
img {
max-width: 100%;
height: auto;
}
max-width 属性指定图像的最大宽度为100%，即图像可以自由伸缩，但其宽度不得超过其容器宽度的百分之百。height:auto 使浏览器自动计算图像的高度，从而保持图像比例不变。
使用 padding-bottom 或 padding-top 属性
另一种方法是使用 padding-bottom 或 padding-top 属性，用它来占据图像容器的高度或宽度，使图像在它们的容器中居中，并按比例缩放它们的大小。
以下是示例代码：
.container {
position: relative;
padding-bottom: 50%; /*按比例设置高度*/
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
上面代码中， .container 是容器，通过 padding-bottom 属性设置容器的高度，然后将图片插入到容器中。由于这个容器设置了固定的padding-bottom，按比例插入的图片便能够保持其高度与宽度的比例不变。
使用vw或vh 单位
最后一种方法是使用视口宽度单位 vw 或视口高度单位 vh 进行选择性缩放。
视口宽度单位 vw 表示相对于视口宽度的 1/100，而视口高度单位 vh 则表示相对于视口高度的 1/100.
以下是示例代码：
img {
max-width: 100%;
height: auto;
}
@media (min-width: 768px) {
img {
width: 50vw; /*vw 指相对于视口宽度的 50%, 因此图片的宽度大于在视口宽度小于 768 像素的设备上。 */
}
}
上述代码中，使用了 CSS 媒体查询@media 来根据视口宽度大小动态地更改图像大小。在视口宽度小于 768 像素时，图片将以完全自适应的方式呈现，宽度最大为其容器的宽度100% ，而在大于 768 像素的宽度时，使用 vw 单位将图像的宽度调整为视口宽度的50%。
总结
CSS 按比例调整图像大小是一种常见的技术，它可以使网站上的图片在不同设备和分辨率下更好地表现，并且可以根据所需的设计来调整图像的尺寸。我们可以使用 max-width 或 max-height 属性、padding-bottom 或 padding-top 属性、vw、vh 单位等方法。为了使图像最佳的适应网页，我们应注意配置网站或应用程序，使其不会缩小图像。