依附保證金在div

這是我第一次使用這個論壇，我非常高興地在這裏找到我的答案，而不用問自己。所以，如果我犯了任何錯誤，我表示歉意。我想要做的是以下幾點：我有一個頭，適合通過CSS的窗口大小（100％）。（高度通過jQuery改變，但我不認爲這與這個問題有關）。在這個頭文件中我有一個圖像，我希望它在屏幕中間。這樣的（我不能把圖像在這個論壇）：依附保證金在div

<----------------image------------------> 
__________ ____________________ __________ 
|   |     |   | 
| REST |     | REST | 
|  IM|AGE IMAGE IMAGE IM|AGE  | 
|__________|____________________|__________| 
      |     | 
      |____________________| 
      <-----screen------> 

REST = not visible (outside the screen)

所以，如果屏幕會更大，將顯示更多的圖像，但它仍然會在中間完全一致。到目前爲止，我所做的一切都進展順利。

作了如下代碼：

<div id="header"> 
    <div id="header_bg"><img src="pics/headerbg.jpg" id="stretch"></div> 
    <div id="logo"> 
      <div class="logo"><img src="pics/logo.png" width="401" height="174"></div> 
    </div> 
</div>

和jquerycode：

if ($("#stretch").width() > $(window).width() ) { 
      $screen = $(window).width(); 
      $pic = $("#stretch").width(); 
      $rest = $pic - $screen; 
      $margin = $rest /2; 
      $margin = $margin - $margin - $margin ; 
      $('#stretch').css({'margin-left':($margin)+'px'}); 
     }

正如你可以看到這個工作得很好，但是當我加載頁面的第一次，它隱藏了太多的圖像，以便我得到和右側的空白空間。

有誰知道我在做什麼錯？

來源

2012-10-03 T-mo-T

更好地使用'viewport'元標記 –

這條線看起來有點瘋狂：'$ margin = $ margin - $ margin - $ margin;'你想在這裏實現什麼？ –

另外，不要在變量上使用'$'前綴，除非它是一個jQuery對象 – Johan

我不確定我是否真的瞭解你，但如果你只需要在屏幕中間居中顯示一張圖片，你可以使用Css屬性背景和中心位置。

<style> 
    #header_bg { background: url('pics/headerbg.jpg') no-repeat center 0; } 
</style> 

<div id="header"> 
    <div id="header_bg">&nbsp;</div> 
    <div id="logo"> 
      <div class="logo"><img src="pics/logo.png" width="401" height="174"></div> 
    </div> 
</div>

來源

2012-10-03 14:18:36

尤其是圖像被命名爲headerbg。jpg，它可能使更多的意識成爲背景圖像。 –

這是我的標題部分的背景圖像。據我所見，css解決方案效果很好。舊版瀏覽器呢？ –

Eh T-mo-T這是一個標準的解決方案，這將適用於所有瀏覽器。你沒有需要JavaScript的解決方案這樣容易... –

我想出了以下基於代碼David Slavik提到的代碼。再次感謝您的解決方案David。

<style> 
    #header_bg { 
    background: url('../pics/headerbg.jpg') no-repeat center center; 
    -webkit-background-size: cover; /*for webKit*/ 
    -moz-background-size: cover; /*Mozilla*/ 
    -o-background-size: cover; /*opera*/ 
    background-size: cover; /*generic*/ } 
</style>

此代碼可以確保如果圖像小於div的高度，它會拉伸一點點。感謝大家的回答。對我而言，這個主題已關閉。

來源

2012-10-04 07:55:08

依附保證金在div

回答

相關問題