jquery: установить ширину изображения, но не больше исходного размера?

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 динамически настраивается на размер экрана. каждое изображение внутри него также должно быть изменено до ширины div .post-body, но только если .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

Необходимо убедиться, что вы измеряете ширину изображения после его загрузки. Поэтому, если вы просто попробуете $('#my-img').width() в обычном коде jQuery, он, вероятно, вернет 0 (если у вас не установлен атрибут width или style width), потому что событие ready не ожидает загрузки изображений. $('#my-img').load(function () { /* do something */ }); должен это сделать.