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

【问题标题】：jquery: set image width but no larger than original size?jquery：设置图像宽度但不大于原始尺寸？
【发布时间】：2023-03-24 07:40:01
【问题描述】：

大家好，我想知道如何解决这个问题：

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 div 的宽度，但前提是 .post-body 不大于图像的原始大小。我不希望图像变得模糊。

就目前而言，它实际上几乎就像我想要的那样工作。该函数在窗口调整大小时调用。但是，如果 .post-body 大于实际图像大小，则图像仍会放大。

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

不知何故，我找不到合适的解决方案，我需要您的帮助。先感谢您，马特

【问题讨论】：

您的两条注释掉的行不起作用吗？当他们不被评论时会发生什么，而不是当他们被评论时？（他们在我看来是正确的）
好吧，它确实有效，但前提是我刷新窗口。如果我调整大小并使其变小，图像会正确调整大小，但是一旦我将其拖大，图像就不再放大了！
您能否确认您的事件在每次调整窗口大小时触发，而不仅仅是在窗口加载时触发？我们可以在某个地方看到你的代码吗？
如果我取消注释，如果窗口调整大小使窗口变小，则内部部分上方的代码将被触发。不知何故，每次调用函数都会覆盖 os 变量。
啊，那是有道理的。我会更新我的答案。

标签： jquery image resize

【解决方案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);
        }
    });
}

【讨论】：

这可能不起作用，因为最接近的元素是一个段落，其固定为 650px。
它正在寻找与.post-body 匹配的最接近的元素，而不是最接近的元素（除非该元素具有“post-body”类）。
不起作用，同样的情况。只是把窗口变小就可以了，把它变大没有任何作用。
答案已完全重写，因为问题已在 cmets 中进一步解释。

【解决方案2】：

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

【讨论】：