CSS：如何强制背景图片拉伸 / 压缩以适应 div，而不保留纵横比？

Question

我遇到了一个令人沮丧的问题，希望能得到一些帮助。

我编写了一个脚本，以便为我正在为客户构建的应用程序调整屏幕上的div大小，但我遇到了一个以前没有遇到过的有趣问题。我知道很多方法可以确保图像保持其纵横比，但我不确定如何强制它不保持比例。例如，如果div高度为200像素，宽度为20像素，我希望它变形以适应该框。

对于我正在构建的应用程序，此特定图像需要压缩/拉伸以适应父div，无论纵横比如何。目前，我可以将其作为div标记内的图像或作为div的背景图像来完成此操作。

如果有人有任何建议，我会很乐意听取。

- lee A.

---

抱歉，出了什么问题？你说你可以使用background或img，那为什么不行呢？ - jaunt

我知道很多方法可以确保图像保持其纵横比，但我不确定如何强制它不这样做。例如，如果 div 的高度为 200 像素，宽度为 20 像素，我希望它可以改变图像的形状以适应该框。 - lee A.

你能否发布一下你已经尝试过的相关代码？ - Wild Beard

Answer 1

您可以使用background-size: 100% 100%来实现此目的：

div {
  margin-bottom: 1em;
  width: 300px;
  height: 200px;
  border: 3px solid black;
  background: url(https://unsplash.it/100x100);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

div:nth-of-type(2) {
  width: 100px;
  height: 400px;
}

div:nth-of-type(3) {
  width: 500px;
  height: 200px;
}

<div></div>
<div></div>
<div></div>

- sol

---

是的，这就是我需要的。很奇怪，因为我之前尝试过使用Background-size，但它没有正确地工作。谢谢！ - lee A.

Answer 2

这是一个可调整大小的示例，使用了background属性：

div{
  resize:both;
  overflow:hidden;
  width:200px;
  height:300px;
  background:url(https://picsum.photos/200/300)no-repeat 0 0;
  background-size:100% 100%;
}

<div></div>

这是另一个使用 img 的例子：

div{
  resize:both;
  overflow:hidden;
  height:300px;
  width:200px;
}
img{
  width:100%;
  height:100%;
}

<div>
  <img src="https://picsum.photos/200/300"/>
</div>

- jaunt

---

如果有其他人注意到第二个示例中缺少了调整大小图形，并且已经知道或想知道解决方案，我在这里提出了相关问题。 - jaunt

Answer 3

在CSS中，background-size属性可以改变背景图像自适应元素的比例方式。

background-size: cover

编辑：

如果您想保留结构，可以使用CSS object-fit属性https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

- LegendaryJLD

---

我已经尝试使用cover，但当div变小于原始图像时，它仍然保持纵横比，并且只是隐藏溢出部分。我需要图像自动拉伸或压缩，以便整个图像始终可见，完全忽略纵横比。 - lee A.

你看过 object-fit 属性了吗？ - LegendaryJLD