如何使带有背景图像的 div 表现得像 <img "width=100%"/>答案

【问题标题】：How to make div with background-image act like like <img "width=100%"/>如何使带有背景图像的 div 表现得像 <img "width=100%"/>
【发布时间】：2016-03-19 14:53:11
【问题描述】：

我有这个代码：

div#fond {
  background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg');
  background-size: cover;
  height: 100%;
  width: 100%;
}

<!DOCTYPE html>
<html>
<body>
  <div id="fond">
    ABCD
  </div>
  <br>
  <img src="https://www.thetileapp.com/images/Purse_Tabletop-46.jpg" width="100%" />
</body>

</html>

如何使 div 具有与 img 相同的行为，以便 div 的高度适应窗口的宽度。目前，高度适应 div 内容。

【问题讨论】：

标签： css background-image background-size

【解决方案1】：

要使百分比高度起作用，您必须添加html, body {height: 100%;}，否则浏览器将无法计算默认值auto 的百分比。百分比高度基于parnet，当父级为body/html时，需要添加我提到的规则。

或者，您可以使用视口单位 (vw/vh)，例如：

div#fond {
  background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg');
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

【讨论】：

感谢您的反思 aziz 但是，我已经测试了 2 个解决方案，但没有一个给出结果，一个像“”的 div 我认为解决方案是更复杂...
看看我的演示：jsfiddle.net/azizn/nvdm4rrd 它按预期工作
感谢阿齐兹的坚持。我对您的小提琴进行了一些修改，在 div 下添加“jsfiddle.net/nvdm4rrd/4 可以看到，当您将 jsfiddle 的分隔符向右移动时，img 的高度和宽度都会被调整。但是在 div 中，背景图像被裁剪了。
@coutiereric 我明白你的意思。只是 100% 的视口高度与实际图像的高度不同……您希望 div 具有基于背景图像的固定高度或动态高度吗？您可以尝试 100% 100% 而不是 cover 为 background-size 但这会拉伸图像：jsfiddle.net/azizn/vvhhuppv
天哪，我不知道vh 和vw 是一回事。这让我省了很多麻烦。