縦横比100％のHTML背景画像

ブートストラップCSSテンプレートと追加カスタムCSSを使用してページを埋めるためのイメージを取得しようとしています。縦横比100％のHTML背景画像

HTML：

<head> 
    <link rel="stylesheet" href="bootstrap.min.css" /> 
    <link rel="stylesheet" href="cover.css" /> 
</head> 
<body> 
    <div class="my_banner"> 
    <div class="col-lg-8"> 
    <h3>Title</h3> 
    </div> 
    <div class="col-lg-4 "> 
    <a class="btn btn-success">Ok</a> 
    </div> 
    </div> 
</body>

cover.css：ブラウザの幅がページの約1/10小さいとき、画像はわずか約1/3ページの高さに充填しかし

.my_banner { 
    padding-top: 50px; 
    text-align: left; 
    color: #f8f8f8; 
    background: url(image.png); 
    max-width: 100%; 
    height: auto; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
}

ブラウザの幅を大きくするとどのようにして全体の高さを常に満たすことができますか？

出典

2016-05-28 Don Smythe

ちょうどあなたがcodepen例作業

.my_banner{ 
    height: 100vh; 
    background: url(image.png) center; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-repeat: no-repeat; 
}

お使いのブラウザのすべての高さの値を記入しますつまり、100VHする高さを設定する必要があります。あなたも、このモミのbackground-sizeプロパティを使用することができますhttp://codepen.io/anon/pen/rLNyvw

出典

2016-05-28 16:29:38

以下のような：

` .my_banner {

padding-top: 50px; 

text-align: left; 

color: #f8f8f8; 

background: url(image.png); 

background-size: 100% 100%; 

background-repeat: no-repeat;

} `

出典

2016-05-29 04:05:15 sheetal

縦横比100％のHTML背景画像

答えて

関連する問題