Question

我在创建可靠的jquery代码时遇到了非常糟糕的问题，这些代码会将图像大小调整为其父div的宽度。有时它有时只是工作。起初我认为IE浏览器只是在烦扰我，但有时候safari，firefox或chrome也没有解雇我的方法。

    $(".post-body img").each(function() {  
        $(this).data('width', $(this).width());
        $(this).data('height', $(this).height());
    });

我在window.load - function中保存数据方法的宽度和高度宽度。

之后，我正在调用setimgwidth（）函数。

function setimgwidth() {
    var bw = $('.post-body').width();
    $(".post-body img").each(function() {   
            if (bw < $(this).data('width')) {
                $(this).attr( 'width', Math.round(bw) );
                //calculate ratio height
                var newHeight = (bw / $(this).data('width')) * $(this).data('height');
                $(this).attr( 'height', Math.round(newHeight) );
            }
    });
}

所以我正在检查父div是否小于其中的图像，图像应该调整为父div的宽度。

我只是无法找到，为什么这种方法并不总是有效。有时图像会调整大小，有时则不会。

你看到有什么奇怪的吗？什么你会做得更好？其他一些方法？

谢谢

编辑：

jQuery(function($){//document ready

    $(window).load(function(){

        //Save the original image width
        $(".post-body p img, .post-body .wp-caption img").each(function() {  
            $(this).data('width', $(this).width());
            $(this).data('height', $(this).height());
        });

        //window resize event
        $(window).resize(function() {
            setimgwidth();
        });

        //set image width inside of .post-body
        function setimgwidth() {
            $(".post-body p img, .post-body .wp-caption img").each(function() {
                console.debug($(this).data('width'));
                console.debug($(this).data('height'));
            });
        }

        //call image-resize functions onload
        setimgwidth();

    });

});//document ready

控制台总是告诉我图像的宽度和高度为0。

Answer 1

在一个地方，您使用的是$(this).attr('width');，而在另一个地方，您使用的是$(this).width()。在这两个地方尝试我认为应该使用的.width()和.height()：

$(".post-body img").each(function() {  
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
});

$(".post-body img").each(function() {   
        if (bw < $(this).data('width')) {
            $(this).width(Math.round(bw));
            //calculate ratio height
            var newHeight = (bw / $(this).data('width')) * $(this).data('height');
            $(this).height(Math.round(newHeight));            
        }
});

另外（也许不相关）你不应该在更改尺寸后为每个图像设置数据宽度和高度属性吗？

$(".post-body img").each(function() {   
        if (bw < $(this).data('width')) {
            $(this).width(Math.round(bw));
            //calculate ratio height
            var newHeight = (bw / $(this).data('width')) * $(this).data('height');
            $(this).height(Math.round(newHeight));
            $(this).data("width", Math.round(bw));
            $(this).data("height", newHeight);
        }
});

最后，我希望你在@Emmett的评论中建议存储图像尺寸onload：

$(".post-body img").load(function() {  
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
});

请注意，width()和height()会返回实际的内容宽度和高度，而不管CSS属性如何，因此只有在内容/图片或其他内容已经完全加载后才能捕获这些值。

Answer 2

代码审核（这不是答案）

我重新考虑了你的代码。我相信它现在更具可读性。

function setImgWidth() {
    var b = $(".post-body");
    var bw = b.width();

    b.find("img").each(function() {
            var t = $(this);
            var tw = t.data("width");
            var th = t.data("height");

            if ( bw < tw ) {
                t
                    .width(Math.round(bw))
                    .height(Math.round((bw / tw) * th));
            }
    });
}

jquery data（）方法并不总是有效？

2 个答案: