jquery - CSS:如何在不保持纵横比的情况下强制背景图像拉伸(stretch)/压缩以适合 div

Question

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

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

对于我正在构建的应用程序，此特定图像需要压缩/拉伸(stretch)以适合父 div，而不管纵横比如何。就目前而言，我可以将其作为 div 标签内的图像，或作为 div 的背景图像。

如果有人有任何建议，我很乐意听取他们的意见。

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>