圖像的寬度和高度取決於其方向

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