背景圖像（縮放和定位）

大小1900×1080的圖像在一個div被用作背景背景圖像（縮放和定位）

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <style> 
     html,body { 
    height:100%; 
} 
     #imageHolder{ 
      background-size:100% auto; 
      background-image:url(img/bg2.jpg); 
      width:100%; 
      height:30%; 
     } 
    </style> 
</head> 
<body> 
    <div id="imageHolder"></div> 
</body> 
</html>

用我的屏幕尺寸1366×768它示出了完整的圖像寬度，但顯然不是完整的高度。現在，div顯示圖像的一部分，我希望它能夠精確顯示圖像的哪一部分，即使我更改了瀏覽器大小。現在發生的情況是，如果我改變瀏覽器大小（比正常情況下更小的寬度）div被調整大小，並且圖像也被調整大小，但調整大小後的圖像現在顯示了以前不可見的部分圖像。

如何獲得圖像的相同部分（無非是更多）就像我在最大化的瀏覽器窗口中獲得一樣。

來源

2016-12-26 Novice

你的方式與'背景position'性能發揮。默認情況下，圖像按左上方對齊，但可以將其更改爲'50％50％'（中心/中心）或'50％100％'（中心/底部）等。 –

你可以添加如下CSS屬性到您的樣式表

background-repeat:no-repeat; 
background-size:cover;

它的工作原理fine.I'm添加下面的代碼片段。

html,body{ 
 
    height:100%; 
 
    width:100%; 
 
    } 
 
#imageHolder{ 
 
      width:100%; 
 
      height:100%; 
 
      /* background-image: url("https://i.stack.imgur.com/wwy2w.jpg"); 
 
      background-repeat:no-repeat;*/ 
 
    background: url("https://i.stack.imgur.com/wwy2w.jpg") no-repeat center center fixed; 
 
      background-size:cover; 
 
    border:1px solid #000; 
 
      
 
    }

<div id="imageHolder"></div>

來源

2016-12-26 15:02:58

此人擁有同樣的問題，我正面臨着，當你開始調整瀏覽器窗口的大小，更多的圖像變得可見，這是不可見之前（全寬），直到我減少瀏覽器窗口的最小寬度，然後顯示完整的圖像，我不想顯示圖像的那些部分（之前不可見）。 – Novice

@Novice現在檢查 –

不，它不起作用。它包含基於窗口大小的或多或少的圖像。我想要顯示完全相同的圖像。 – Novice

-1

使用本

#imageHolder{ 
      background-image:url(img/bg2.jpg); 
      width:100%; 
      height:30%; 
      background-size: cover; 
     }

來源

2016-12-26 15:10:10

background-repeat:no-repeat; 
background-size:cover; 
background-position: center center;

你可以替換頂部，底部，左，右中心爲中心，以獲得您想要的圖像更精確的一部分在調整大小。

來源

2016-12-26 15:13:29 evilgenious448

它可以是座標方面的特定窗口嗎？ – Novice

是的，你可以做百分比甚至像素等如果你想要更多的信息，請閱讀這裏：[link] http：//www.w3schools。com/cssref/pr_background-position.asp – evilgenious448

您描述的初始佈局具有

768窗口高度的高度/寬度比* 30％的高度= 230像素（高度）

230像素高度/ 1366像素寬度= 0.168

現在，讓我們爲div設置這個比例，使用填充技巧：

在此佈局中，圖片的頂部將始終顯示。這就是你問的，因爲它是默認情況下開始看到的。

以防萬一你想要的圖像的另一部分可以看出，調整背景位置相應

html, 
 
body { 
 
    width: 100%; 
 
    margin: 0px; 
 
    
 
} 
 
#imageHolder { 
 
    background-size: 100% auto; 
 
    background-image: url(http://lorempixel.com/1900/1080); 
 
    width: 100%; 
 
    height: 0px; 
 
    padding-top: 16.86%; 
 
}

<div id="imageHolder"></div>

來源

2016-12-26 20:25:46 vals

我想，用你的技術，我接近得到我正在尋找的東西。唯一的問題是它沒有顯示完整的圖像寬度。我不知道如何，但它應該顯示縮放以適應屏幕（100％寬度）的圖像（大於屏幕尺寸）。 – Novice

背景圖像（縮放和定位）

回答

相關問題