Question

我有几个图像的画廊有这样的尺寸：1600px×1042px

我使用css中的样式在网站上剪切和居中图像：

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

对于屏幕分辨率高于1600px的人，我将该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白线（因为图像的高度高于屏幕分辨率）。

有谁知道如何解决这个问题？

Answer 1

尝试设置

overvlow: hidden;

通过css包装div容器，然后删除

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

来自你的js。

使用jQuery进行垂直居中和裁剪图像

1 个答案: