CSS：如何强制背景图像拉伸/压缩以适合 div，而不保持纵横比

Question

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

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

对于我正在构建的应用程序，无论纵横比如何，此特定图像都需要压缩/拉伸以适合父 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>

Answer 2

在 CSS 中， background-size 属性可以改变背景图像与元素的比例。

background-size: cover

编辑：

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

Answer 3

这是一个使用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>