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

Question

我的画廊有几张具有该尺寸的图片：1600px × 1042px

我使用 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 的白线（因为图像的高度高于屏幕分辨率）。

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

Answer 1

尝试设置

overvlow: hidden;

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

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

来自你的 js。