變焦上調整

圖片我正在開發一個網站，我要顯示一個圖片（不是問題）。但是，我不得不將其顯示爲鏈接：http://buildinternet.com/project/supersized/slideshow/3.2/demo.html 變焦上調整

所以，在調整，我有放大的圖片永遠不會縮放。做一些知道如何做到這一點？

以下是我有：

HTML：

<div id="container_images"> 
    <ul> 
     <li><img src="images/desktop/myimage.jpg" alt="An awesome image"></li> 
    </ul> 
</div>

CSS：

#container_images{ 
    display: block; 
    position: fixed; 
    left: 0; 
    top: 0; 
    overflow: hidden; 
    z-index: -999; 
    height: 100%; 
    width: 100%; 
} 

#container_images li{ 
    display: block; 
    list-style: none; 
    z-index: -30; 
    position: fixed; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity:1; 
} 

#container_images li img{ 
    width: 100%; 
    height: 100%; 
    display: block; 
}

來源

2013-02-26 Romain

請不要期待用戶反向工程的外部網站。請包括一個工作示例作爲您的問題的一部分。 – 2013-02-26 15:56:41

編輯我的帖子，對不起 – Romain 2013-02-26 15:57:50

你說的是用Ctrl調整+/-？ – 2013-02-26 16:06:47

如果我理解正確，您不需要瀏覽器的內置變焦（CTRL +），你只是想調整窗口大小時使圖片填充瀏覽器的整個窗口。

您將需要兩件事情了點。

首先，您需要一些JavaScript來執行窗口大小調整事件，然後您需要一些簡單的數學運算來計算圖片的中心，並考慮新的窗口大小並將圖片的左/上邊距設置爲新值。

您可以輕鬆地做到這一點與jQuery：

$(window).resize(function() { 
    var h = $(window).height(); 
    var w = $(window).width(); 
    var pic = $('#container_images img'); 
    var pic_width = pic.width(), pic_height = pic.height(); 

    $(pic).css('margin-left': (w - pic_width)/2).css('margin-top': (h - pic_height)/2); 
});

有一點要記住的是，如果你的圖片的寬度/高度已經從原來的大小改變，你會得到從寬度新的大小（）和height（）函數。

因此，您要麼確保原稿未被觸摸，要麼使用其中一種解決方案抓取原始圖片尺寸（例如How do I get actual image width and height using jQuery?）。

而且上面的代碼是隻讓你開始，你應該抓住，照片和參數一些初始化函數，只有重新計算/修改resize事件的CSS。

來源

2013-02-26 17:36:13

回答

相關問題