Question

当我使用以下1920x1080 pic（或我尝试过的其他分辨率）时，图片的最顶部会被切断。有什么方法可以防止这种情况吗？

div.background {
    background-image: url("/images/home.jpg");
    background-repeat: no-repeat;
    position: absolute; 
    height: 100%; 
    width: 100%;
    margin-top: 100px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-position: 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

div.header {
    background-color: red;
    width:100%;
    height: 100;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding: 0px 0px 0px 0px;

}

body {
    margin: 0px 0px 0px 0px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main2.css">
</head>
<body>
<div class="header"></div>
<div class="background"></div>
</body>
</html>

Answer 1

这就是background-size: cover的作用，使得您的背景图像在保持纵横比的同时进行缩放，以覆盖整个容器。如果图像与div的宽高比不匹配，则会出现剪裁。

如果你可以保证你的背景图像总是具有相同的宽高比，你可以这样做：

div.background {
    background-image: url("/images/home.jpg");
    background-repeat: no-repeat;
    position: absolute; 

    /* these lines are the important bits */
    height: 0;
    padding-bottom: 56.25%;
    box-sizing: border-box;

    width: 100%;
    margin-top: 100px;
    top: 0;
    /* bottom: 0; */
    left: 0;
    /* right: 0; */
    z-index: 0;
    background-position: 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

相对填充和边距均基于width，而不是height。使用该特定百分比会导致div具有与图像匹配的宽高比，16：9。具有相同的宽高比意味着使用cover时不会发生削波。有关该主题，请参阅this answer。

border-box会导致height和width包含padding和border尺寸，但不包括margin尺寸，从而阻止了margin从影响div的尺寸开始。

Answer 2

将div.background上的margin-top更改为0px。这将消除图片中的切断

div.background {
background-image: url("/images/home.jpg");
background-repeat: no-repeat;
position: absolute; 
height: 100%; 
width: 100%;
margin-top: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
background-position: 50% 50%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

}

100％宽度背景图像顶部切断

2 个答案: