<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0}
.wrap{
height: 40px;
width: 1000px;
background-color: #ccc;
}
.box{
background: url('/img.png');
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">example</div>
</div>
</body>
</html>
当视口宽度小于1000时,实际body元素的宽度没有被撑开到1000PX。而是按默认设置为“浏览器可视窗口的宽度”和”min-width”属性中的最大值来解析的。
**解决方法:**给父元素设置min-width
(或者给body
设置min-width
)
body {
min-width: 1000px;
}