Изменить размер изображения при изменении размера окна (jQuery)

Я пытаюсь изменить размер изображений при загрузке страницы и при изменении размера браузера. Некоторые изображения будут портретными, а некоторые альбомными, и они будут находиться в контейнере div, который также может быть портретным/альбомным (в зависимости от размера браузера). Не имеет значения, должно ли изображение быть растянуто, чтобы заполнить поле (либо на 100% ширины, либо на 100% высоты), и если соотношение не совпадает, произойдет отсечение (через CSS overflow:hidden).

Мой метод заключался в том, чтобы получить соотношение контейнера (то есть портретное или альбомное) и получить соотношение изображения (портретное или альбомное), сравнить их и соответствующим образом настроить ширину/высоту CSS.

Примечание: все контейнеры будут иметь класс mr_our-dest-img-container и все будут содержать только 1 элемент img (и несколько других элементов).

Вот код, который у меня есть, который не работает. Он ничего не делает, и я не могу понять это. Может ли кто-нибудь помочь мне исправить это?

$(document).ready(function () {
    updateImageSize();
    $(window).resize(function() {
        updateImageSize();
    });
});

function updateImageSize() {
    $(".mr_our-dest-img-container").each(function(){
        var ratio_cont = jQuery(this).width()/jQuery(this).height();
        var $img = jQuery(this).find("img");
        var ratio_img = $img.width()/$img.height();
        if (ratio_cont > ratio_img)
        {
            $img.css({"width": "100%", "height": "auto"});
        }
        else if (ratio_cont < ratio_img)
        {
            $img.css({"width": "auto", "height": "100%"});
        }
    }
};

javascript jquery window-resize image-resizing
person Michael Ruta    schedule 15.01.2014    source источник
comment
Консоль Google Chrome выдает мне эту ошибку Uncaught SyntaxError: Unexpected token } и выделяет последнюю фигурную скобку в коде в основном вопросе. Я снова и снова просматривал этот код, фигурные скобки, похоже, отменяют друг друга?   -  person Michael Ruta    schedule 15.01.2014

Ответы (1)


arrow_upward
3
arrow_downward

Это синтаксическая ошибка, как сказала консоль. Вы пропустили ) после завершения функции each.

function updateImageSize() {
    $(".mr_our-dest-img-container").each(function(){
        var ratio_cont = jQuery(this).width()/jQuery(this).height();
        var $img = jQuery(this).find("img");
        var ratio_img = $img.width()/$img.height();
        if (ratio_cont > ratio_img)
        {
            $img.css({"width": "100%", "height": "auto"});
        }
        else if (ratio_cont < ratio_img)
        {
            $img.css({"width": "auto", "height": "100%"});
        }
    }); //missing )
};
person qqfish    schedule 15.01.2014