javascript - 图像的宽度和高度取决于它的方向

Question

我有两种类型的图像:垂直图像和水平图像。每张图片通过js调整到屏幕的高度。我想让水平照片适应屏幕的宽度。可能吗？

这是我的js代码:

<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>

感谢您的帮助

Answer 1

只是创造一个条件。按原样加载图像，然后检查它的宽度和高度。如果高度高于宽度，则按照您现在的操作进行。否则，调整宽度，并将高度设置为“自动”。

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');
  }
}