javascript - 使用jQuery垂直居中和裁剪图像

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。