縮放與背景圖像的DIV，以適應屏幕尺寸

我的大部分網頁都有在剛剛菜單下的頂級全幅橫幅。它們創建爲具有來自圖像精靈文件的背景圖像的div，以減少頁面加載時間。我的問題是，當屏幕變小時，div不會調整大小，它只是減小div的大小。我想要的是，div始終是100％寬，並且其高度尺寸可以保持背景圖像的比例（1300px×300px）。縮放與背景圖像的DIV，以適應屏幕尺寸

這裏代碼和一個的jsfiddle：我添加了一個代碼與寬度成比例地調整大小的div

<div class="entry-content"> 
    <div class="banner"></div> 
</div>

.entry-content { 
    max-width: 1300px; 
    width: 100%; 
    padding: 0 20px 0 20px; 
} 
.banner { 
    margin: 0 -20px 0 -20px; 
    max-width: 1300px; 
    height: 300px; 
    background: url("http://renservice.dk/wp-content/uploads/2016/02/banner-sprites.jpg"); 
    background-position: 0 -900px; 
}

https://jsfiddle.net/fy2zh4vm/1/

來源

2016-03-07 Jeppe Bech

你想調整圖像的大小，隨着橫幅div的寬度調整大小？ – 2016-03-07 07:52:05

是的。圖像sholud總是有相同的比例，並且100％寬。 –

然後，您可以使用最小寬度而不是最大寬度。因此圖像始終保持其比例並且100％寬。 – 2016-03-07 07:57:27

。但不要認爲精靈圖像背景將解決您的問題。

這裏是一個小提琴鏈接 https://jsfiddle.net/fy2zh4vm/3/

$(window).on('load resize', function(e){ 
$('.banner').height(parseFloat((300/1300)*$(window).width())); 
});

來源

2016-03-07 07:29:14

也許你應該在jsfiddle中試試，並告訴我是否解決了這個問題？它沒有。 –

對於這一個，你將需要計算背景位置 –

您正在尋找你需要將其設置爲以cover或contain取決於如果你想讓它覆蓋div標籤或不background-size屬性。

如果你想在這裏閱讀更多的是link

來源

2016-03-07 07:35:08

他們都沒有工作。 –

也許你應該將精靈分成多個圖像。 –

好吧，但爲什麼大家都告訴我將圖像合併爲精靈？他們不知道響應式設計嗎？ –

正如我已經在我的評論說：我建議你剛剛擺脫的精靈，你可以用background-size:cover或background-size:contain解決您的問題。如果你不能這樣做，我發現了一個解決方案，可以與精靈一起工作，但是你需要javascript（我使用jQuery，但是如果你更喜歡普通的JS，那應該很容易實現）。

這個想法是，你讀了你的banner div的width，並相應地調整它的height和background-position值。

而這裏的Fiddle

希望幫助，但再次：這是不是最好的解決方案，這是唯一的解決辦法，如果你絕對必須使用精靈！

來源

2016-03-07 09:03:03 mmgross

代碼也需要調整大小。編輯你的照片，這樣它也可以調整大小。檢查https://jsfiddle.net/73sryvfw/2/。我想你需要重新考慮你的背景位置邏輯。 –

是的，添加一個調整大小處理程序太簡單了，不能在小提琴中提及。這是每個人都應該能夠自己做的事情，而小提琴故意儘可能短。 – mmgross

謝謝。我決定用個人圖像替換精靈，現在它工作的很好。 –

我認爲這是可能與原始CSS和一點點黑客。 Nicolas有一個blog post，他描述瞭如何實現具有確定比例的背景圖像。

我另外一個fiddle讓你離開。僞元素中的百分比是通過一些計算構建的：100/(width/height)。

編輯：不知道這是否與精靈的作品。但也許它不過是一個幫助:)

來源

2016-03-30 06:55:29 fheck

縮放與背景圖像的DIV，以適應屏幕尺寸

回答

相關問題