Resize image depending on window height

Question

As per the title, I want to be able to reduce image size when window height becomes smaller. It's working for reducing part but I want it to get the original height back when window height is greater than specified.

I know this part $('.model').height(); is wrong.

$(window).on('load resize', function() { 
  var h = $(window).height(); 

  if (h < 850) {
     $('.model').height(600); 
  } else { 
     $('.model').height(); 
  } 
});

Answer 1

You can try to store the height of .model in a variable and restore it like this:

var originalHeight = $('.model').height();  

$(window).on('load resize', function() { 
   var h = $(window).height();

  if (h < 850) {
     $('.model').height(600); 
  } else { 
     $('.model').height(originalHeight); 
  } 
});

Answer 2

try putting height back into (the default) "auto" when you want the original size back? $(window).on('load resize', function() { var h = $(window).height();

if (h < 850) {
   $('.model').height(600); 
} else { 
   $('.model').css("height","auto"); 
} 
});