CSS：如何强制背景图像拉伸/压缩以适应div，而不保持纵横比 [英] CSS: How to force background image to stretch/compress to fit div, without keeping aspect ratio

问题描述

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

I'm having a frustrating issue, and would love some help.

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

I've written a script to allow me to resize a div on screen for an application I'm building for a client, but I've run into a humorous issue I've not had before. I know plenty of ways to make sure that an image Does keep its aspect ratio, but I'm not sure of how to force one not to. If, for example, the div is 200px tall and 20px wide, I want it to deform the image to fit that box.

对于我正在构建的应用程序，无论纵横比如何，此特定图像都需要压缩/拉伸以适合父div。在我现在的位置，我可以将其作为div标签内的图像，或作为div的背景图像。

For the application I'm building, this particular image needs to compress/stretch to fit the parent div, regardless of aspect ratio. At the point I'm at right now, I can do this as an image inside of a div tag, or as a background image to the div.

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

If anyone has any suggestions, I would love to hear them.

推荐答案

您可以使用背景大小：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>

这篇关于CSS：如何强制背景图像拉伸/压缩以适应div，而不保持纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！