I'm trying to resize images when a page is loaded and when the browser is resized. Some images will be portrait and some landscape, and they will be in a container div that also may be portrait/landscape (depending on browser size). It doesn't matter if the image should be stretched to fill the box (either 100% width or 100% height) and if the ratio's do not match then clipping will occur (through CSS overflow:hidden).

My method was to get the ratio of the container box (ie portrate or landscape) and get the image ratio (portrait or landscape), pare them and adjust the CSS width/height accordingly.

Note: all the containers will have a class of mr_our-dest-img-container and will all only contain 1 img element (and some different elements).

Here is the code I have, which doesn't work. It doesn't do anything, and I can't figure it out. Could anyone help me fix this?

$(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%"});
        }
    }
};

I'm trying to resize images when a page is loaded and when the browser is resized. Some images will be portrait and some landscape, and they will be in a container div that also may be portrait/landscape (depending on browser size). It doesn't matter if the image should be stretched to fill the box (either 100% width or 100% height) and if the ratio's do not match then clipping will occur (through CSS overflow:hidden).

My method was to get the ratio of the container box (ie portrate or landscape) and get the image ratio (portrait or landscape), pare them and adjust the CSS width/height accordingly.

Note: all the containers will have a class of mr_our-dest-img-container and will all only contain 1 img element (and some different elements).

Here is the code I have, which doesn't work. It doesn't do anything, and I can't figure it out. Could anyone help me fix this?

$(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
• image-resizing
• window-resize

• Google Chrome console gives me this error Uncaught SyntaxError: Unexpected token } and highlights the last curly bracket in the code in the main question. I've looked over and over this code, the curly brackets seem to all cancel each-other out? – Michael Ruta Commented Jan 15, 2014 at 10:29

1 Answer 1

It is a syntax error just as the console said. You missed a ) at the end of the each function.

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