縮放圖像，以適應容器，同時保持長寬比與jquery

Question

我一直在嘗試縮放圖像，以適應父容器。這裏是我的代碼：

標記

<ul class="slides"> 
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li> 
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li> 
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li> 
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li> 
    <li class="scale"><img src="<?php echo $attachments->src('full'); ?>" /></li> 
</ul> 

CSS

.fullWidth { 
    width:100%; 
    height:auto; 
} 
.fullHeight { 
    width:auto; 
    height:100%; 
} 

JS

$('.scale img').each(function(){ 
    var img = $(this); 

    if (img.height() < img.width()){ 
     img.addClass('fullWidth'); 
    } else { 
     img.addClass('fullHeight'); 
    } 
}); 

有什麼奇怪的是，儘管一些圖像肖像，有些是景觀，JS給所有圖像fullHeight類。我希望圖像可以按比例縮放和調整大小，因爲父母使用百分比尺寸。我嘗試了很多插件，但似乎沒有爲我工作。任何人有想法？

Answer 1

除非您正在等待所有圖像完成加載，否則.height()和.width()將不會返回正確的值，因爲這些值僅在圖像加載後纔有效。如果他們都返回零或未定義，那麼你將獲得全部的全班級。

這裏的解決方案是使用onload處理程序並在加載圖像時設置類。因爲標記中的圖像可能會在JS運行之前加載（尤其是在瀏覽器緩存中）時，您必須檢查圖像是否已加載，如果已加載，請使用它的高度和寬度，或者如果尚未加載，需要設置一個onload處理程序。或者，您可以使用onload在標記中分配一個onload處理程序，以確保負載處理程序在加載之前已安裝。

下面是檢查是否加載圖像並適應基於這樣一種方法：

$('.scale img').each(function(){ 

    function setClass() { 
     var img = $(this); 
     if (img.height() < img.width()){ 
      img.addClass('fullWidth'); 
     } else { 
      img.addClass('fullHeight'); 
     } 
    } 

    // if the image is loaded, then we can set the class now 
    if (this.complete) { 
     setClass.call(this); 
    } else { 
     // otherwise, must set class in load handler when it is loaded 
     this.onload = setClass; 
    } 

}); 

如果你可以修改標記，那麼你就可以做到這一點它有它的優勢，總是立即成立只要加載圖像：

標記：

<ul class="slides"> 
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li> 
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li> 
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li> 
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li> 
    <li class="scale"><img onload="scaleDynamic()" src="<?php echo $attachments->src('full'); ?>" /></li> 
</ul> 

代碼：

// this must be a global function 
function scaleDynamic() { 
    var img = $(this); 
    if (img.height() < img.width()){ 
     img.addClass('fullWidth'); 
    } else { 
     img.addClass('fullHeight'); 
    } 
} 

僅供參考，如果有這些圖片，因爲它們加載可能是可見的，那麼你可能要設置自己默認的樣式是visibility: hidden，當他們完成加載，當你設置縮放類的樣式設置爲visibility: visible並加載圖像。

Answer 2

對於純JQuery的溶液 - 設置圖像爲100％的寬度和高度和比例通過JQuery的包裝紙：

HTML

<img class="fullSize" src=""> 

CSS

.fullSize{ 
    width:100%; 
    height:100%; 
} 

JQuery的

$(document).ready(function(){ 
function scaleContainer(){ 
    //check height based on 100% window width 
    var expectedHeight = ($(window).width() * flashHeight)/divWidth; 
    if(expectedHeight <= $(window).height()){ 

     //height is within the window - we can set width to 100% 


     $('.divWrapper').css('width', $(window).width()+'px'); 
     $('.divWrapper').css('height', expectedHeight+'px'); 



    }else{ 
     //height doesn't fit - set Height to 100% and scale width 
     var scaledWidth = (divWidth*$(window).height())/flashHeight; 



     $('.divWrapper').css('width', scaledWidth+'px'); 
     $('.divWrapper').css('height', $(window).height()+'px');  


    } 


} 
scaleContainer(); 


$(window).resize(function() { 
    scaleContainer();   
});//window resize 



});