垂直居中，並與jQuery

我有幾個圖片的畫廊裁剪圖像誰擁有尺寸：1600像素×1042px垂直居中，並與jQuery

我砍，並使用現場爲中心的圖像，樣式CSS：

.graphic-container img {margin-top: -22%; margin-bottom: -22%;}

對於有人誰的屏幕分辨率高於1600像素高我包括jQuery代碼到網站：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     resizeDiv(); 

    window.onresize = function(event) { 
     resizeDiv(); 
    } 

    function resizeDiv() { 
     document.body.style.overflow = "hidden"; 
     vpw = $(window).width(); 
     vph = $(window).height(); 
     $('#featured .csc-imagewrap img').css({'width': vpw + 'px'}); 
    } 

}); 
</script>

但當畫廊下是一些更多的內容，誰查看網站做對事不對人查看整個內容，因爲右側滾動條被禁用。

我知道行document.body.style.overflow = "hidden";做到了這一點，但是當我禁用該行時，我在畫廊右側有15px白線（因爲圖片的高度高於屏幕分辨率）。

有誰知道如何解決這個問題？

來源

2013-07-15 Adrian

嘗試設置

overvlow: hidden;

爲通過CSS包裝的div容器，然後取下

document.body.style.overflow = "hidden";

從JS

。

來源

2013-07-15 09:03:19 hyde

我有我的CSS中的樣式：'.graphic-container {overflow：hidden; background-size：包含; position：relative;}' – Adrian

您還應該定義包裝的高度和寬度。如果你不設置高度，div會擴大。嘗試設置'身高：100％;' – hyde

我在響應式網頁設計中製作該網站，該解決方案打破了我的畫廊 – Adrian

垂直居中，並與jQuery

回答

相關問題