我有这段代码：
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内容。
答案 0 :(得分：3)
要使百分比高度起作用，您必须添加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;
}