Question

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

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

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

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

Answer 1

您可以使用background-size: 100% 100%：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

在CSS中，background-size属性可以将背景图像的比例转换为元素。

background-size: cover

编辑：

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

Answer 3

以下是使用background的重要大小示例：

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

其他人使用img：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: