Centering and cropping vertically with jQuery

Question

I have a gallery with two images that have these sizes: 1600px × 1042px

I cut and center the images on the site using these styles in css:

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

For those with a screen resolution above 1600 pixels, I include this jquery code on 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 there is still some content under the gallery, the one who views the site does not see all the content, because the right scroller is disabled.

I know the line document.body.style.overflow = "hidden"; did it, but when I turned off this line, I have a 15px white line on the right side of the gallery (because the images have a higher height than the screen resolution).

Does anyone know how to fix this?

Answer 1

Try to install

overvlow: hidden;

for container div container via css and then remove

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

from your js.