Question

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

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动态调整为screenize。其中的每个图像也应该调整为.post-body div的宽度，但前提是.post-body不大于图像的原始大小。我不希望图像变得模糊。

至于它现在实际上几乎像我想要的那样。在窗口调整大小时调用该函数。但是如果.post-body大于实际图像尺寸，则图像仍然会被放大。

如果我取消注释上面的代码它似乎工作，但只有当我将窗口调整为较小的大小。如果调整大小，图像将不再调整并保持较小。这可能是因为每次调用函数时原始大小都会被覆盖。

不知怎的，我找不到合适的解决方案，我需要你的帮助。先感谢您，亚光

Answer 1

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

以下代码需要在加载DOM并且图像有宽度后运行（可能需要在.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);
        }
    });
}

Answer 2

您需要确保在加载后测量图像的宽度。因此，如果您只是在普通的jQuery代码中尝试$('#my-img').width()，它可能会返回0（除非您设置了width属性或宽度样式），因为ready事件不会等待图像加载。 $('#my-img').load(function () { /* do something */ });应该这样做。

jquery：设置图像宽度但不大于原始尺寸？

2 个答案: