Question

I’m using Oliver Boermans’ jQuery plugin for fitting images into a container with 100% width and height (so, essentially, the viewport); http://www.ollicle.com/eg/jquery/imagefit/

The meat of the plugin is this;

$(img)
    .width('100%').each(function()
    {
        $(this).height(Math.round(
            $(this).attr('startheight')*(dim.outerWidth/$(this).attr('startwidth')))
        );
    })
    .css({marginTop: Math.round( ($(window).height() - $(img).height()) / 2 )});

The startwidth and startheight attributes contain the image’s actual pixel dimensions.

Now, this works absolutely perfectly when the image is wider than the viewport. However, I found that when the viewport is vertically shorter than the image, it doesn’t fit the image into the viewport vertically.

How can I modify this plugin to take vertical fitting into account in addition to horizontal, so that whatever the dimensions and aspect ratio of the viewport may be, every inch of the image is always displayed fully?

I prepared a fiddle to play with; http://jsfiddle.net/NXJCd/ – adjust the Result division’s size to see the plugin in action. If you set the height as shorter than the fitted image, the top and bottom edges of the image get cut.

EDIT: So after some confusion, I want to clarify; I want to proportionally fit the image inside the container. All of the image needs to always be visible, but never larger than its original dimensions. I’ve visualized it below. The jQuery plugin I have for this works for horizontal fitting (Examples A and C), but it doesn’t fit vertically (Example B). That’s what I want to solve.

EDIT2: After some further confusion, I even made an animation detailing how I want it to behave; http://www.swfme.com/view/1064342

Answer 1

Changing the one function worked for me:

one : function(img){
    var parentDim = $(img).parent().getHiddenDimensions();        
    var heightWidthRatio = $(img).attr('startheight') / $(img).attr('startwidth');
    var newWidth, newHeight;

    //Width > height.
    if(heightWidthRatio < 1) {            
        newWidth = parentDim.outerWidth > $(img).attr('startwidth')
            ? $(img).attr('startwidth') : parentDim.outerWidth;
        newHeight = Math.round(newWidth * heightWidthRatio);

        if(newHeight > parentDim.outerHeight) {
            newHeight = parentDim.outerHeight;
            newWidth = Math.round(newHeight / heightWidthRatio);
        }
    }
    //Height >= width.
    else {            
        newHeight = parentDim.outerHeight > $(img).attr('startheight')
            ? $(img).attr('startheight') : parentDim.outerHeight;
        newWidth = Math.round(newHeight / heightWidthRatio);

        if(newWidth > parentDim.outerWidth) {
            newWidth = parentDim.outerWidth;
            newHeight = Math.round(newWidth * heightWidthRatio);
        }
    }

    $(img).width(newWidth).height(newHeight)
        .css({marginTop: Math.round(($(window).height() - $(img).height()) / 2 )});
}

Note that this instead uses the size of the parent div – because image size is set to 100% in the CSS, it meant that the initial image dimensions were larger than the containing div, which can cause issues the first time the function is called.

Edit:

I have updated the code above, but the changes are:

newWidth = parentDim.outerWidth;

Becomes:

newWidth = parentDim.outerWidth > $(img).attr('startwidth') ? $(img).attr('startwidth') : parentDim.outerWidth;

And

newHeight = parentDim.outerHeight;

Becomes:

newHeight = parentDim.outerHeight > $(img).attr('startheight') ? $(img).attr('startheight') : parentDim.outerHeight;

These changes should ensure that images do not expand to larger than their actual dimensions.