100％の幅の背景画像トップカット

-1

私は1920x1080の写真（または私が試した他の解像度の場合）を使用すると、画像の一番上が切れてしまいます。これを防ぐ方法はありますか？100％の幅の背景画像トップカット

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>

出典

2016-07-28 cente

div.backgroundのmargin-topを0pxに変更します。すなわち、background-size: coverは何だその容器の全体を覆うように、アスペクト比を維持しながら、背景画像を、スケーリングされるようにそれを行う画像

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;

}

出典

2016-07-28 23:03:40 Alastair

これはヘッダーをカバーします – cente

からカットオフ除去します。画像のアスペクト比と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はdivの寸法に影響を与えるからmarginを防止する、marginサイズpaddingとborderサイズを含むようにheightとwidthの原因ではありません。

出典

2016-07-28 23:11:02 Ouroborus

うわー！複雑な応答、私はそれを介して雑草する必要がありますが、これは完全にそれです。ありがとうございました：-） – cente

100％の幅の背景画像トップカット

答えて

関連する問題