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

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

1 个答案: