缩放图像，以适应容器，同时保持长宽比与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 



});