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

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