Vertical centering and cropping image with jQuery

Question

I have gallery with couple of images who has that size: 1600px × 1042px

I cut and centers images on site using that styles in css:

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

For someone who screen resolution is higher than 1600px I include that jquery code to the site:

<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>

But when under the gallery is some more content, the person who viewing the site don't see the whole content, because the right scroller is disabled.

I know that the line document.body.style.overflow = "hidden"; made this, but when I disable that line I have 15px white line on right side of the gallery (because the images has higher height than the screen resolution).

Does anyone know how to fix this?

Answer 1

Try to set

overvlow: hidden;

for the wrapping div container via css and then remove

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

from your js.