背景圖片全寬和高度

我正在爲網站設置橫幅。旗幟是由圖像，並在它上面的一些文字，下面的代碼：背景圖片全寬和高度

<div class="banner_div"> 
<style> 
    .banner_div{ 
     background-image: url(/images/banner.jpg); 
     width: 100%; 
     height: 100%; 
     background-size: contain; 
    } 
</style> 
<p class="banner_text">Line 1</br>Line 2</p> 
</div>

我需要的是圖像覆蓋屏幕（即使該屏幕比寬的整個寬度圖像，在這種情況下圖像應strech）和div的高度相應地縮放，以便圖像完全顯示。我怎樣才能做到這一點？我試過的background-size每個屬性，但它沒有工作...

編輯：現在的問題是，高度擴展壽文

來源

2016-11-18 DevBob

'background-size：cover'？ – kukkuz

background-size：cover;或背景大小：100％100％; –

background-size：cover; –

請嘗試以下解決方案的一個：

body, html { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.banner_div { 
 
    background-image: url(http://placehold.it/100x100); 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background-size:cover; 
 
    background-position: center; 
 
}

<div class="banner_div"> 
 
    <p class="banner_text">Line 1</br>Line 2</p> 
 
</div>

來源

2016-11-18 09:45:05

首先使用16：9的圖像獲得更好的結果：

然後用img標籤本身，

沒有它的長寬比考慮縮放圖像可能不好看的一面旗幟，所以我們使用width:100%和height:auto維護旗幟的比例。大多數屏幕採用16：9比例，所以它應該是很好的，如果你有一個16：9的圖像

body, 
 
html { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100%; 
 
} 
 

 
.banner{ 
 
    display:block; 
 
    } 
 

 
.banner img { 
 
    width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
} 
 
.banner p { 
 
    float:left; 
 
    position:absolute; 
 
    top:0px; 
 
}

<div class="banner"> 
 

 
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Aspect_ratio_16_9_example.jpg" /> 
 
    <p>Some text here</p> 
 
</div> 
 

 
Some random text to show other elements wont overlap the banner

來源

2016-11-18 09:52:14

我對您的問題更好的解決方案。

問題是因爲您沒有給出HTML，BODY的高度。如果你給身高這個問題將得到解決，無需位置元素添加到這一點，就會使一些對齊問題在未來

SOLUTION

HTML

<div class="banner_div"> 
<p class="banner_text">Line 1</br>Line 2</p> 
</div>

CSS

html,body{ 
 
     height:100%; 
 
     margin:0; 
 
     padding:0; 
 
    } 
 
    .banner_div{ 
 
     background-image: url(http://placehold.it/100x100); 
 
     background-size: cover; 
 
     background-position: center; 
 
     width:100%; 
 
     height:100%; 
 
    } 
 
    .banner_text{ 
 
     margin:0; 
 
     padding:20px; 
 
    }

<div class="banner_div"> 
 
<p class="banner_text">Line 1</br>Line 2</p> 
 
</div>

來源

2016-11-18 10:10:43

背景圖片全寬和高度

回答

相關問題