使用 CSS 按比例调整图像大小

在网页上，经常需要对图片进行大小调整以适应不同的设备和页面布局。通常我们会通过 CSS 来实现对图片的调整，而按比例进行缩放可以保持图片的原始宽高比，不会出现图片变形的情况。本文将介绍如何使用 CSS 按比例调整图像大小。

使用 max-width 和 max-height 属性

使用 max-width 和 max-height 属性可以让图片按比例缩放，并且限制最大的宽度和高度。这样可以保证图片在缩放后不会失去清晰度。

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

代码解析：

• max-width: 100%;：将图片的最大宽度设置为其所在容器的宽度，即图片可以根据容器的大小等比例缩放。
• max-height: 100%;：将图片的最大高度设置为其所在容器的高度，同样可以根据容器大小等比例缩放。

使用 width 和 height 属性

另外一种方式是直接使用 width 和 height 属性。但是要注意，只使用这两个属性可能会导致图片变形，因此需要使用 object-fit 属性来保持图片的宽高比。

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

代码解析：

• width: 100%;：将图片的宽度设置为其所在容器的宽度。
• height: 100%;：将图片的高度设置为其所在容器的高度。
• object-fit: contain;：保持图片的宽高比，但可能会造成空白。

使用 aspect-ratio 属性（CSS3）

在 CSS3 中引入了 aspect-ratio 属性，可以直接设置图片的宽高比，而无需设置其他属性。

img {
  aspect-ratio: 2/1; /* 宽高比为 2:1 */
}

需要注意的是，目前仅有部分浏览器支持 aspect-ratio 属性，因此在使用时需要进行兼容性检查。此外，如果需要调整图片的大小，仍需使用其他属性。

结语

以上是使用 CSS 按比例调整图片大小的几种方法。在实际项目中，一般会根据不同的需求选择最合适的方法来调整图片大小。了解这些方法，可以为开发带来更大的便利。