2

我一直在尝试缩放图像以适应父容器。这是我的代码：

标记

<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类。我希望图像像父级一样缩放和调整大小，因为父级使用百分比尺寸。我尝试了很多插件，但似乎没有一个适合我。有人有想法吗？

4

2 回答 2

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您设置缩放类并加载图像时的样式。

于 2013-05-14T02:11:02.903 回答
0

对于纯 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



});
于 2013-08-23T17:42:50.693 回答