javascript - 使用 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

尝试设置

溢出:隐藏；

通过css为包装div容器移除

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

来自你的 js。