Question

I want to resize an image with the class of mainImg using jQuery depending on the viewport size. Using the following script I can get the image to resize to the exact viewport height available, but I want to reduce the size by 20px on the top and 50px on the bottom margin to create some white space.

var viewportHeight = $(window).height();
$(document).ready(function() {
  $('.mainImg').css({ height: viewportHeight});
});

Answer 1

just try in this way:

var viewportHeight = $(window).height();
$(document).ready(function() {
   $('.mainImg').css({ 
      height    : (viewportHeight-70) + 'px', 
      marginTop : "20px" 
   });
});

the idea is to reduce the whole height by 70px and apply a margin-top of 20px; in this way a 50px space at the bottom is automatically created