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()将不会返回正确的值，因为这些值仅在图像加载时有效。如果它们都返回零或未定义，那么你将获得所有它们的fullHeight类。

这里的解决方案是使用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 ＃39;设置缩放类并加载图像。

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



});

缩放图像以适应容器，同时保持纵横比与jquery

2 个答案: