背景圖像應該是窗口的分辨率

-2

假設我的身體標籤具有分辨率爲1920 x 1020的背景圖像。當我加載我的頁面時，我的窗口只有〜800 x 800的大小。我不' t想要加載1920 x 1020分辨率，只有800 x 800我需要顯示背景圖像。背景圖像應該是窗口的分辨率

任何方式來實現這一目標？

<div class="give_me_background_plx"> 

</div> 

body, 
html { 
    height:100%; 
    width:100%; 
} 

.give_me_background_plx { 
    background: url("http://placehold.it/1920x1000") center center, 100% 100%; 
    height:100%; 
    width:100%; 
}

編輯：見的jsfiddle。當我打開那個頁面時，我不想加載要加載的完整圖像，而是一個與窗口大小完全相同的較小版本。就像在img-tag中，我想爲該圖像設置高度/寬度，這些應該是我的窗口大小。

來源

2015-11-20 ChrisK

請顯示您已完成的一些代碼。另外，你只是問如何讓你的整個圖像顯示，而不是被窗口裁剪？嘗試查看'background-size：contains'或'background-size：cover'。如果這是一個加載問題，那麼你需要針對不同的斷點（媒體查詢）有不同的CSS – ntgCleaner

爲了有更多的機會被理解和收回更快的回覆，請嘗試發佈你有問題的代碼 – RiccardoC

Nope，saddly not 。我知道如何設置一個完整大小的背景。但我想知道我是否可以裁剪大小，以便較小的設備可以在不使用不同圖像的情況下加載較小的圖像。 – ChrisK

不幸的是，這是你只能通過Javascript完成的東西（我個人比較喜歡jQuery）。

因爲你只需要加載一個形象和不負荷在另一個圖像只要窗口變大（如羅伊的回答完成）。

jQuery的將是類似於：

$(document).ready(function() { 
    if ($(window).width() <= 800) { // if the width is equal to, or smaller than 800 px. 
     $("body").css("background","url(image-800.jpg) no-repeat"); // load the small image 
    } else { // if the width is bigger than 800 px 
     $("body").css("background","url(image-1920.jpg) no-repeat"); // load the bigger image. 
    } 
});

JSFiddle demo with your gravatar

注意：要測試演示，你必須用小寬度加載頁面，然後用寬度較大的重新加載超過800像素。

來源

2015-11-20 15:12:01

只能用Javascript完成，我不這麼認爲。您是否在Chrome Devtools中打開了您的網絡標籤，測試了我的答案？只有一個圖像會加載有關您的視口。當您調整到其他圖像的大小時，將會加載該圖像。不需要Javascript和純CSS更清潔。 – Roy

確實，它確實加載了其他圖像（如果屏幕在某個點變大）。但是OP在你的回答中評論說他想要加載一個圖像，所以要麼是大圖像，要麼是小圖像，而不是小圖像，如果大圖像之前已經加載過。這隻能用Javascript完成。 –

@ChrisK，這是真的嗎？請澄清你的問題。我不能從你的問題得出結論。 – Roy

所以你想加載關於視口的不同圖像？使用CSS媒體查詢爲：

body { 
    background: url(image-1920.png); 
} 

@media(max-width:800px){ 
    body { 
     background: url(image-800.png); 
    } 
}

來源

2015-11-20 15:00:24 Roy

我想加載一個圖像，並且該圖像應該與窗口大小一致。這可能聽起來很愚蠢，因爲當我以800 x 800的分辨率加載圖像，然後轉到全屏時，背景的分辨率會非常糟糕。但那就是我現在想要達到的目標。 – ChrisK

更改你的答案，在媒體查詢中添加'body {'，否則你不會更改任何css。 :) –

@Daan Heskes：我接受了你的修改。 – Roy

body標籤的CSS每畝100％（寬度：100％），或者您可以使用背景大小屬性來設置你的圖像的尺寸在背景。

來源

2015-11-20 15:03:36

背景圖像應該是窗口的分辨率

回答

相關問題