Scaling and cropping an image adaptively based on the window dimensions I've tried my best (I'm new to JS) to write a script that make an image fit to its parent div with respect of the ratio and overflowing when needed.

For example, if the height of the image is smaller than the window's height, I set the height equal to the window's height and the width overflow the window's width. I then horizontally center the image.

If the width is smaller than the window's width, I do the way around.

An example can be seen here: JSFiddle

Note that the example doesn't work as I'm seeing it on my browser (Chrome). Refresh simulation might not work properly.

The fact is that everything is working as expected when I refresh the page. If I try to resize the page, the ratio is not respected at all. But then again, If I refresh the page (after it's been resized), the image fits perfectly.

function imageFitToScreen() {
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  var postThumbnailWidth = $('#postThumbnail').width();
  var postThumbnailHeight = $('#postThumbnail').height();
  var imageWidth = $('#postThumbnail').find('img').width();
  var imageHeight = $('#postThumbnail').find('img').height();
  if ((windowHeight &lt; windowWidth) &amp;&amp; (imageHeight &lt; imageWidth)) {
    $('#postThumbnail').find('img').css('width', 'auto');
    $('#postThumbnail').find('img').css('height', '100%');
  }
  var imageWidth = $('#postThumbnail').find('img').width(); /* imageWidth value has changed with the if before */
  if ((windowHeight &lt; windowWidth) &amp;&amp; (imageWidth &lt; postThumbnailWidth)) {
    $('#postThumbnail').find('img').css('min-width', '100%');
    $('#postThumbnail').find('img').css('height', 'auto');
  }
  if ((windowWidth &lt; windowHeight) &amp;&amp; (imageWidth &lt; imageHeight)) {
    $('#postThumbnail').find('img').css('width', '100%');
    $('#postThumbnail').find('img').css('height', 'auto');
  }
  var imageHeight = $('#postThumbnail').find('img').height(); /* imageHeight value has changed with the if before */
  if ((windowWidth &lt; windowHeight) &amp;&amp; (imageHeight &lt; postThumbnailHeight)) {
    $('#postThumbnail').find('img').css('width', 'auto%');
    $('#postThumbnail').find('img').css('min-height', '100%');
  }
}

$(window).on("load", imageFitToScreen);
$(window).on("resize", imageFitToScreen);


I double the var imageHeight and var imageWidth before they are called again because they change within the first and third IF.

I don't know if it's important for you to know that I'm changing the #postThumbnail width/height before I run this script.

function refreshDynamicSize() {
  $('#content').find('#postThumbnail').css('min-height', $(window).height() - $('header').height());
  $('#content').find('#postThumbnail').height($(window).height() - $('header').height());
  $('#content').find('#postThumbnailTitle').css('line-height', $(window).height() + 'px');
  $('#content').find('#extend').css('min-height', $('#postThumbnail').height());
}

$(window).on("load", refreshDynamicSize);
$(window).on("resize", refreshDynamicSize);


What I'm looking for is an optimisation of the code as it works on refresh but not on resize.

It might surely be really simple (like change in execution order, or an "on.load" something...).
This seems like the kind of thing that should be done purely in CSS using media queries, specifically orientation.  When the window is taller than it is wide, the rules inside

@media all and (orientation: portrait) { … }


… would apply.  When the window is wider than it is tall, it would be

@media all and (orientation: landscape) { ... }


Furthermore, I would consider that image to be background-image styling for &lt;h2&gt;The post title&lt;/h2&gt; rather than an &lt;img&gt; element in its own right.  The scaling should be handled by a background-size rule.