jquery - 缩放图像以适应容器，同时使用 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() 将不会返回正确的值，因为这些值仅有效当图像加载后。如果它们都返回零或未定义，那么您将获得所有它们的 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: hide ，并在它们完成加载时将样式设置为 visibility: 可见 当您设置缩放类并加载图像时。