在CSS中使背景圖像響應

我試圖從頭開始創建一個響應式網站，而不使用任何框架如bootstrap。我曾在我的網站上的橫幅廣告，我已經設置背景圖片如下在CSS中使背景圖像響應

<body> 
    <div id="pagewrap"> 
     <div class="test"> 
      <div class="headers"> 
       <div class="logo"> 
        <a href="#"><img src="images/logo.png" alt="Site Logo"/></a> 
       </div><!--logo--> 
       <div class="nav"></div><!--nav--> 
       <div class="slider_content"></div><!--slider_content--> 
      </div><!--header--> 
     </div> 
    </div><!--pagewrap--> 
</body>

.headers { 
    background-image:url(images/banner.png); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
    width:100%; 
}

當我申請高度與div頭圖像被顯示，但它走的是同樣的高度，移動設備也該沒有按看起來不錯。我如何使這種響應能夠使背景圖像根據設備分辨率進行縮放。

來源

2015-05-15 Shareer

[Responsive css background images]（http://stackoverflow.com/questions/12609110/responsive-css-background-images） – Persijn

@Persijn我嘗試瞭解釋那裏沒有設置任何高度或寬度的解決方案。但不幸的是它不工作 – Shareer

您是否嘗試過使用百分比值？像高度100％或者你可以嘗試使用vh屬性。但是當你想與VH工作，確保你使用過，因爲瀏覽器支持的jQuery：

var viewHeight = $(window).height(); 
    $('.element').css('height', viewHeight);

來源

2015-05-15 10:18:36 moesphemie

也許這會幫助你，Demo

$(window).resize(function() { 
    var imgHeight = $(window).height(), 
     imgWidth = $(window).width(); 
    $('.headers').css({ 
     height: imgHeight, 
     width: imgWidth 
    }); 
});

來源

2015-05-15 10:35:15 stanze

嘗試將填充百分比，而不是一個固定的高度。

所以padding-bottom:50%;和改變蓋background-size:100% auto;

讓我知道如何去我覺得這是我得到了一輪之前。

來源

2015-05-15 10:39:47 DCdaz

在CSS中使背景圖像響應

回答

相關問題