Width and height of the image depends on its orientation

Question

I have two types of images: vertical and horizontal. Every images adjusting by js to the height of the screen. I would like to adapt the horizontal photos to the width of the screen. Is it possible?

Here is my js code:

<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(); 
      $('.flexslider img').css({'width': 'auto'});
      $('.flexslider img').css({'height': vph + 'px'});
  }

  window.onload = function () { 
    document.body.style.overflowX = "auto";
  }

});
</script>

Thanks for any help

I think you're looking for the `vw` and `vh` css units. I made a sort of [polyfill](http://stackoverflow.com/questions/13948713/is-there-any-cross-browser-javascript-for-making-vh-and-vw-units-work/13951057#13951057) a while ago — elclanrs, Jan 08 '14 at 18:42

score 0 · Accepted Answer · answered Jan 08 '14 at 18:54

Just create a condition. Load the image as it is, then check for it's width and height. If height is higher than width, then do as you're doing now. Else, adjust the width, and set height to "auto".

function resizeDiv() {
  var img = $('.flexslider img');
  vpw = $(window).width(); 
  vph = $(window).height(); 

  if(img.width() < img.height()) {
     img.width('auto');
     img.height(vph + 'px');
  }
  else {
     img.width(vpw + 'px');
     img.height('auto');
  }
}

Width and height of the image depends on its orientation

1 Answers1