代码之家  ›  专栏  ›  技术社区  ›  matt

jquery:设置图像宽度但不大于原始大小?

  •  0
  • matt  · 技术社区  · 14 年前

    嘿伙计们, 我想知道如何解决这个问题:

    function setimgwidth() {
        var bw = $('.post-body').width();
        $(".post-body p img").each(function() {
            var os = $(this).width();
            //if (bw < os) {
                $(this).removeAttr('height');
                $(this).width(bw);
            //}
        });
    }
    

    它内部的每个图像也应该调整到.post body div的宽度,但前提是.post body不大于图像的原始大小。我不想让图像变得模糊。

    如果我取消注释上面的代码,它似乎可以工作,但只有当我调整窗口的大小到更小的时候。如果图像的大小调整得更大,图像将不再调整并保持较小。

    不知怎么的,我找不到合适的解决办法,我需要你的帮助。 提前谢谢你, 马特

    2 回复  |  直到 14 年前
        1
  •  1
  •   Blair McMillan    14 年前

    当您试图调整窗口大小以使其更大(因此div和图像)时遇到的问题是原始图像大小正在丢失。

    .load() )

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

    以下代码需要在“窗口大小调整”事件上运行(与您当前所做的一样):

    function setimgwidth() {
        var bw = $('.post-body').width();
        $(".post-body p img").each(function() {
            // Check the width of the original image size
            if (bw < $(this).data('width')) {
                $(this).removeAttr('height');
                $(this).width(bw);
            }
        });
    }
    
        2
  •  0
  •   Nathan MacInnes    14 年前

    $('#my-img').width() 在正常的jQuery代码中,它可能会返回0(除非您设置了width属性或width样式),因为ready事件不会等待图像加载。 $('#my-img').load(function () { /* do something */ });