如何將瀏覽器置於比網站寬的圖像上

Question

我的網站寬度爲900px。我有一張想要展開的圖像，寬度爲1300px，但仍然位於頁面上方。目前，當我在瀏覽器中打開頁面時，我位於圖像的左側。我可以按Ctrl +鼠標滾輪縮小，讓它更接近我的目標。但我不希望網站觀衆不得不這樣做。我該如何合理輕鬆地解決這個問題？

Answer 1

你的意思是中心的背景圖像？

background-position: center 0

這應該工作，因爲它可以接受中心值：http://reference.sitepoint.com/css/background-position

Answer 2

試試這個：

margin : 0px auto; 

使用這個CSS代碼中div的類在您的IMG有。

Answer 3

我認爲最好的辦法是去與一些JavaScript，從一個<img>標籤轉換圖像爲背景圖片：

<div class="wide-image"><img src="..."></div> 

JavaScript的使用jQuery（但你可以很容易地做到這一點，沒有它/與其他一些工具）：

​​$(function() { 
    $('.wide-image').each(function() { 
     var $div = $(this), 
      $img = $div.find('img:first'); 

     // Transform normal image into background image 
     $div.css('background', 'url(' + $img.attr('src') + ') no-repeat center center'); 

     // Adjust the <div>s height to fit the image's height 
     $div.height($img.height());   

     // Hide the original image 
     $img.hide(); 
    }); 
});​ 

演示：http://jsfiddle.net/NBKsm/