让图片完整装入容器，同时保持宽高比不变的方法

2023-10-21 14:08:20

正文

问题

有时我们会遇到这样的问题：将一张图片放入容器中时，图片的尺寸可能小于容器，也可能大于容器。如果图片尺寸小于容器，则直接按照图片的原尺寸显示即可。但是，如果图片尺寸大于容器，则需要缩放图片以完全装入容器。同时，我们需要确保图片尽可能地匹配容器的尺寸，并保持图片的宽高比例不变（也就是说，图片不能被拉伸或挤压变形）。

解决方法：

要解决这个问题，我们可以使用 CSS3 的 background-size 属性。background-size 属性允许我们指定图片在容器中的缩放行为。它有三个属性值：

auto： 这是默认值。它表示图片将按比例缩放，以适合容器。如果图片的宽高比与容器的宽高比不同，则图片将被裁剪。
contain： 表示图片将按比例缩放，以完全装入容器。如果图片的宽高比与容器的宽高比不同，则图片将留有空白区域。
cover： 表示图片将按比例缩放，以完全覆盖容器。如果图片的宽高比与容器的宽高比不同，则图片将被裁剪。

使用方法：

要使用 background-size 属性来控制图片在容器中的缩放行为，我们可以使用以下步骤：

将图片放入容器中。
使用 CSS3 的 background-size 属性指定图片的缩放行为。
根据需要，调整容器的尺寸或图片的尺寸。

实例：

html
<div class="container">
  <img src="image.jpg" alt="Image">
</div>

css
.container {
  width: 200px;
  height: 200px;
  background-image: url("image.jpg");
  background-size: contain;
}