Modifier la taille de l'image lorsque la fenêtre est redimensionnée (jQuery)

Je suis en train de redimensionner les images lorsqu'une page est chargée et lorsque le navigateur est redimensionnée. Certaines images seront portrait et un paysage, et ils seront dans un div conteneur qui peut également être en portrait ou paysage (en fonction de la taille du navigateur). Il n'a pas d'importance si l'image doit être étirée pour remplir la boîte (100% de la largeur ou de 100% de la hauteur), et si le rapport ne correspondent pas, l'image sera rognée (via CSS overflow:hidden).

Ma méthode était d'obtenir le ratio de la boîte (c'est à dire portrate ou paysage) et d'obtenir le rapport de l'image (portrait ou paysage), de les comparer et ajuster le CSS largeur/hauteur en conséquence.

Note: tous les conteneurs auront une classe de mr_our-dest-img-container et tous contiennent seulement 1 élément img (et certains éléments différents).

Voici le code que j'ai, qui ne fonctionne pas. Il ne fait rien, et je ne peux pas le comprendre. Quelqu'un pourrait-il m'aider à résoudre ce problème?

$(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%"});
        }
    }
};
Google Chrome console me donne cette erreur Uncaught SyntaxError: Unexpected token } et les faits saillants de la dernière accolade dans le code de la question principale. J'ai regardé sur et sur ce code, les accolades semblent tout annuler les uns les autres?

OriginalL'auteur Michael Ruta | 2014-01-15

  1. 3

    C'est une erreur de syntaxe juste que la console a dit. Vous manquez un ) après la each fonction fin.

    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 )
};

    OriginalL'auteur qqfish