css样式中怎么拉伸图片

1. 前言

提到 CSS 样式拉伸图片，可能会想到两个属性：`height` 和 `width`。用这两个属性可以设置图片的高度和宽度，会改变图片的宽高比例，使图片变形。但是，CSS 还有其他一些属性可以实现拉伸图片的效果，并且不会使图片变形。本文将为您介绍这些方法。

2. object-fit 属性

`object-fit` 属性用于指定图片的尺寸调整方式。默认值是 `fill`。在不改变图片宽高比例的情况下，可以拉伸图片至填充其父容器。若要拉伸图片，可以设置 `object-fit` 为 `cover`。

2.1 cover

`cover` 属性将图片的宽高比例保持不变，将图片缩放至填充其父容器，并且剪切超出的部分，使图片显示背景色或边框。用法如下：

img {
  object-fit: cover;
}

下面是一个实例，演示如何使用 `cover` 属性拉伸图片。

可以看到，使用 `cover` 属性可以拉伸图片至填充其父容器。

2.2 contain

`contain` 属性将图片的宽高比例保持不变，将图片缩放至适应其父容器，图片的较小边界将对齐父容器的对应边缘，剩余的空间用背景色或边框填充。用法如下：

img {
  object-fit: contain;
}

下面是一个实例，演示如何使用 `contain` 属性拉伸图片。

可以看到，使用 `contain` 属性可以拉伸图片以适应其父容器。

3. background-size 属性

如果您想使用 CSS 背景图片并拉伸它而不使其变形，可以使用 `background-size` 属性。该属性指定背景图片的大小。

3.1 cover

与 `object-fit` 属性的 `cover` 相同，`background-size` 属性的 `cover` 值将背景图片的宽高比例保持不变，将其缩放至填充其容器，并且剪切超出的部分。用法如下：

.element {
  background-image: url('image.jpg');
  background-size: cover;
}

3.2 contain

与 `object-fit` 属性的 `contain` 相同，`background-size` 属性的 `contain` 值将背景图片的宽高比例保持不变，将其缩放至适应其容器，将背景图片的较小边缘与其容器边缘对齐，并在其较大边缘上添加背景色。用法如下：

.element {
  background-image: url('image.jpg');
  background-size: contain;
}