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

Question

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

<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>

Answer 1

我認為您想嘗試background-size: contain; 或background-size: cover; 。

Answer 2

過去，當我不得不這樣做時，我會遇到其他一些考慮。 是的，您可以縮放以填充它。 但是，如果要拉伸圖像內容，則必須考慮圖像內容本身以及外觀。 如果它是抽象圖像，則可以很好地拉伸，否則可能效果不佳。

如果您不關心圖像失真，可以將HTML和BODY高度設置為100％，然后將CSS background-size設置為100％auto，就像這個小提琴一樣。

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;
}

如果不要拉伸圖像確實很重要，我將根據檢測到的屏幕寬度使用CSS媒體查詢為每種設備或屏幕類型獲取圖像。 然后動態設置圖像，並使用上面提到的背景尺寸CSS。

Answer 3

您可以在樣式中使用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>

Answer 4

我對我的網站登錄頁面做了類似的操作。 以下是我所做的簡短總結。 讓我們知道是否有幫助。

我發現使用空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;
}

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

問題描述

4 個解決方案

解決方案1
0 2016-12-27 20:26:08

解決方案2
0 2016-12-27 20:28:39

解決方案3
0 2016-12-27 20:37:30

解決方案4
0 2016-12-27 20:41:36

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

問題描述

4 個解決方案

解決方案1 0 2016-12-27 20:26:08

解決方案2 0 2016-12-27 20:28:39

解決方案3 0 2016-12-27 20:37:30

解決方案4 0 2016-12-27 20:41:36

解決方案1
0 2016-12-27 20:26:08

解決方案2
0 2016-12-27 20:28:39

解決方案3
0 2016-12-27 20:37:30

解決方案4
0 2016-12-27 20:41:36