需要幫助在頭部圖像上獲得響應式設計

我的整個網站都是響應式，除了我的橫幅/標題，我似乎無法找到它的修復。我使用視口進行響應，我的橫幅根本沒有反應！需要幫助在頭部圖像上獲得響應式設計

這裏是頭一個簡單的jsfiddle， https://jsfiddle.net/Syystole/L9r2p9so/19/

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


<div class="WrapperPage"> 
     <div id="banner"></div> 
</div>

CSS

.WrapperPage { 
    max-width:62em; 
    margin:auto; 
      } 

#banner { 
    background-image: url("http://lorempixel.com/400/200/sports/1"); <!./ starts from current directory> 
    text-align:center; 
    padding:170px; 
     }

來源

2017-04-19 Syystole

好像你要使用'背景大小：cover'但不能肯定。當你說你想讓它響應時，你的意思是什麼？您希望它在視口大小調整時的行爲如何？ –

只是想在較小的視圖中看到整個圖像 – Syystole

如果你想整個圖像可見，規模與視，使用background-size: cover的組合來拉伸圖像以適應元素，並且使用padding-bottom: 50%來匹配圖像的高寬比Ø總是存在的空間中顯示

.WrapperPage { 
 
    max-width: 62em; 
 
    margin: auto; 
 
} 
 

 
#banner { 
 
    background-image: url("http://lorempixel.com/400/200/sports/1"); 
 
    text-align: center; 
 
    padding-bottom: 50%; 
 
    background-size: cover; 
 
}

<div class="WrapperPage"> 
 
    <div id="banner"></div> 
 
    <p> 
 
    body text 
 
    </p> 
 
</div>

整個圖像

來源

2017-04-19 20:22:32

這似乎不適用於我的標題 – Syystole

@Syystole更具體。什麼不行？你在找什麼？ –

@Syystole你說過的「只是想在一個較小的視圖中看到整個圖像。」這使您能夠以較小的視圖或任何視圖查看整個圖像。 –

需要幫助在頭部圖像上獲得響應式設計

回答

相關問題