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

【问题标题】：CSS: How to force background image to stretch/compress to fit div, without keeping aspect ratioCSS：如何强制背景图像拉伸/压缩以适合 div，而不保持纵横比
【发布时间】：2018-04-09 07:05:17
【问题描述】：

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

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

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

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

【问题讨论】：

抱歉，有什么问题吗？你说过你可以使用background 或img 那为什么不呢？
"我知道很多方法可以确保图像保持其纵横比，但我不确定如何强制不这样做。例如，div 高 200px和 20 像素宽，我希望它使图像变形以适合该框。”
您能发布到目前为止您尝试过的任何相关代码吗？

标签： jquery html css image

【解决方案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>

【讨论】：

是的，这就是我需要的。奇怪的是，考虑到我之前尝试过使用 Background-size 并且它不能正常工作。谢谢！
@leeA。很高兴它有帮助

【解决方案2】：

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

background-size: cover

编辑：

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

【讨论】：

我试过封面，但是当 div 比原始图像小时它仍然保持纵横比，并且只是隐藏了溢出。我需要图像拉伸或压缩自身，以便整个图像始终可见，完全忘记纵横比。
你看过object-fit属性吗？

【解决方案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%;
}

&lt;div&gt;&lt;/div&gt;

这是另一个使用img：

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

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

【讨论】：

如果其他人注意到第二个示例中缺少调整大小的图形并且有（或想知道）解决方案，我已经询问了here