HTML中身體背景的可縮放圖像

如何正確設置HTML中的身體背景圖像以便可縮放？我正在使用Chrome擴展程序，因此無需擔心移動設備（？）當前的HTML頁面非常簡單，我只是需要它來顯示圖像（最終將顯示來自文件夾的隨機圖像，但現在一個硬編碼的圖像就足夠了）。在不同屏幕尺寸的不同設備（如平板電腦，筆記本電腦，計算機外接顯示器）上使用鍍鉻並保留圖像質量時，如何使圖像可縮放？HTML中身體背景的可縮放圖像

<html> 
    <head> 
     <title> New Tab </title> 
    </head> 
    <style> 
    body { 
     background-image:url('indexImage.png'); 
     background-repeat:no-repeat; 
     background-size:cover; 
     background-position: center; 
    } 
    </style> 

    <body> 
    </body> 
</html>

來源

2016-12-27 babsndeep

能否請你解釋一下你的 '可擴展' 是什麼意思？ –

絕對，@WaisKamal。例如，我可縮放的意思是，如果用戶在比原始提供的圖像更小或更大的屏幕上打開擴展程序，我們如何確保圖像質量得到保留，以及整個圖像是否仍然適合瀏覽器窗口。 – babsndeep

您可以使用圖像圖層而不是背景進行更好的操作。只需將圖層的「z-index」屬性設置爲最低，並將CSS設置爲「width：100％;身高：自動。 –

我想你想嘗試background-size: contain;或background-size: cover;。

來源

2016-12-27 20:26:08

當我不得不在過去這樣做時，我遇到了一些其他的考慮。所以，是的，你可以調整它來填充，當然。但是你必須考慮圖像內容本身，以及如果伸展它，它看起來如何。如果它的抽象圖像可能很好地拉伸，否則它可能不會很好。

如果不關心圖像失真，可以將HTML和BODY高度設置爲100％，然後將CSS背景大小設置爲100％auto like this fiddle。

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

body { 
     background-image:url('http://columbiascbestnewhomes.com/images/brunson-plan.jpg'); 
     background-repeat:no-repeat; 
     background-size:100% 100%; 
     background-position: center; 
}

如果物質DOES該圖像不被拉伸我會使用CSS媒體查詢具有用於每個設備或屏幕類型，基於檢測到的屏幕寬度的圖像。然後動態設置圖像並使用上面提到的背景大小的CSS。

來源

2016-12-27 20:28:39 tamak

您可以按照您的樣式使用background-size並以百分比設置值。這樣的：

<style> 
    body { 
     height: 100%; 
     width: 100%;    
     background-image:url('aa.gif'); 
     background-repeat:no-repeat; 
     background-size:cover; 
     background-position: center; 
     background-size: 80% 80%; 
    } 
</style>

來源

2016-12-27 20:37:30

我爲我的登錄頁面類似我的網站的東西。以下是我所做的簡要說明。讓我們知道是否有幫助。

我發現它更好地使用空的div而不是做正文。

@{ 
    Random random = new Random(); 
    int randomNumber = random.Next(0, 5); 
    string background = "Images/bg-" + randomNumber + ".jpeg"; 
} 


<div id="background" style="background-image: url('@background');"></div>

CSS：

html{ 
    height:100% 
    margin:0; 
    padding:0; 
} 
body{ 
    min-height:100% 
    margin:0; 
} 
#background{ 
    background-color:#1f212e; 
    background-position:center; 
    background-size:cover; 
    position: absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
}

來源

2016-12-27 20:41:36 Sicae

HTML中身體背景的可縮放圖像

回答

相關問題