垂直居中，并与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

回答

相关问题