CSS圖像背景 - 拉伸到100％的高度，但保持圖像水平居中頁面

任何幫助將不勝感激！CSS圖像背景 - 拉伸到100％的高度，但保持圖像水平居中頁面

什麼我試圖做的是保持背景圖像拉伸至100％的高度，無論觀衆的屏幕尺寸，同時保持圖像水平居中在任何時候都在頁面上。到目前爲止，我已經找到了100％的高度，但我一直試圖弄清楚如何水平居中 - 目前它是固定的left：0px;我認爲這應該很簡單。我的代碼在下面，也許這不是解決這個問題的正確方法。謝謝！

<style type="text/css"> 
#background { 
width: 100%; 
height: 100%; 
position: fixed; 
left: 0px; 
top: 0px; 
z-index: -1; 
} 

.stretch { 
    height:100%; 
} 
</style> 

</head> 

<body> 
<div id="background"> 
    <img src="logo.jpg" class="stretch" alt="" /> 
</div> 
</body> 
</html>

來源

2011-08-22 Dillon

似乎在這個小提琴是工作：http://jsfiddle.net/mK6Ms/你能告訴我們在哪兒不會對jsFiddle.net一個例子嗎？ –

另外，如果您創建了jsFiddle而不是鏈接到您的網站，您可能會獲得更好的結果。對於我來說，我不會去關於SO的神祕鏈接，因爲我不知道那裏有什麼。它還使您更容易找出問題。 –

非常感謝安倍。我將在未來的請求中記住這一點......使用jsfiddle是個好主意。 – Dillon

我敢肯定還有其他的方法來添加背景類似，但在這種情況下，添加#background { text-align: center; }，它會在所提供的集裝箱中心圖像。

來源

2011-08-22 20:19:39 rochal

謝謝!!!這完美地完成了這個技巧。我沒有嘗試羅伯特的建議，但約拿的建議似乎沒有工作......我真的很感謝你的快速反應，這個網站是驚人的。 – Dillon

當圖像在拉伸到100％後變寬時，這將不起作用， – user151496

也許這將幫助

<html> 
<head> 
    <style type="text/css"> 
     #background { 
      width: 700px; 
      height: 100%; 
      margin: 0 auto; 
      z-index: -1; 
     } 

     .stretch{ 
      height:100%; 
     } 
    </style> 
</head> 
<body> 
    <div id="background"> 
     <img src="logo.jpg" class="stretch" alt="" /> 
    </div> 
</body>

來源

2011-08-22 20:25:21 Robert

簡單！只需添加以下到您的.stretch {}：

margin-left:auto; 
margin-right:auto;

來源

2011-08-22 20:28:59

CSS圖像背景 - 拉伸到100％的高度，但保持圖像水平居中頁面

回答

相關問題