图像的宽度和高度取决于其方向答案

【问题标题】：Width and height of the image depends on its orientation图像的宽度和高度取决于其方向
【发布时间】：2014-01-08 18:41:09
【问题描述】：

我有两种类型的图像：垂直和水平。每个图像由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>

感谢您的帮助

【问题讨论】：

我认为您正在寻找 vw 和 vh css 单位。我不久前做了一个polyfill

标签： javascript jquery html css

【解决方案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');
  }
}

【讨论】：