Fitting image width to screen by preserving ratio and max size

Question

I would like to be able show an image with the width fitting to the browser screen and height resizing according to the aspect ratio with the image not getting bigger then his original size. I found this post and the link provided in the first answer is kinda what I want but not exactly. It resizes the image without any restraints on the maximum size. How can I do that?

The code from the answer:

(function ($) {

$.fn.photoResize = function (options) {

    var element = $(this), 
        defaults = {
            bottomSpacing: 10
        };

    $(element).load(function () {
        updatePhotoHeight();

        $(window).bind('resize', function () {
            updatePhotoHeight();
        });
    });

    options = $.extend(defaults, options);

    function updatePhotoHeight() {
        var o = options, 
            photoHeight = $(window).height();

        $(element).attr('height', photoHeight - o.bottomSpacing);
    }
};

}(jQuery));

Please check my answer (which is currently downvoted), I modified the original plugin to keep into account to not upscale the image. — Anima-t3d, Jun 13 '14 at 08:54

web-tiki · Accepted Answer · 2014-06-13T08:43:15.780

7

You don't need JS. This behaviour, can easily be achieved with simple CSS

DEMO

CSS :

img{
    max-width:100%;
    height:auto;
}

EXPLANATION :

The max-width:100%; property states that the element shouldn't be wider that 100% of containers width. So if the image is wider than the container, it is shrunk to fit inside the container and use the whole availabe width. If the container is wider than the image, the image keeps its natural size.

The height:auto; property :

The browser will calculate and select a height for the specified element. (MDN)

So the aspect ratio of the image is preserved according to the width of the image.

edited Jun 13 '14 at 08:43

answered Jun 13 '14 at 07:38

web-tiki

99,765
32
217
249

1

Nice if you can explain your solution. – Rupam Datta Jun 13 '14 at 08:21
1

@RupamDatta added explanation to my answer. – web-tiki Jun 13 '14 at 08:33
Working clean code: Check. Explanation: Check. Working example: Check. +1 Dear sir – timo Jun 13 '14 at 08:50
This answer does not provide a solution to the OP: it won't fit image when original size of image is taller than screen height. My answer does fix this. – Anima-t3d Jun 13 '14 at 09:01
@Anima-t3d the OP did not mention any resizing according to the height of the viewport. The aim is : "show an image with the width fitting to the browser screen" (quoting OP). Your fix resizes according to the height too and that is great but you can't say "This answer does not provide a solution to the OP..." as this answer fills the requirements stated by OP. – web-tiki Jun 13 '14 at 09:07
@web-tiki Okay, I understood the requirements as it should fill viewport, but not bigger than original size. Especially since the solution he found so far does exactly that (filling viewport that is). – Anima-t3d Jun 13 '14 at 09:10

Anima-t3d · Answer 2 · 2014-06-13T09:04:46.637

I have fixed the code you mention in the original post.

Github repo with rewrite of original plugin.

$('img.test').photoResize({
    upscaleImageWidth:false,
    upscaleImageHeight:false
});

This fixes the problem because it also takes into account the viewport height, which a CSS only version does not. It is also an improved version of what the OP first indicated to have found.

Full plugin code:

(function ($) {

$.fn.photoResize = function (options) {

var element = $(this),
defaults = {
bottomSpacing: 10,
rightSpacing: 20,
// remember initial picture size (used as maximum size)
             unscaledHeight: $(element).height(),
             unscaledWidth: $(element).width(),
             upscaleImageWidth: true,
             upscaleImageHeight: true
};

options = $.extend(defaults, options);

        $(element).load(function () {
            changeDimensions();
        });
        // the load event is a bit tricky -- it seems to not fire if
        // the element has been loaded very fast... i.e. from the browser's cache.
        // Therefore we force dimension change even before any load event has
        // been received:
        changeDimensions();
        $(window).bind('resize', function () {
            changeDimensions();
        });

        function changeDimensions() {
            // again, we might have to load the picture, yet...
            if ( options.unscaledHeight == 0 ) {
                options.unscaledHeight = $(element).height();
                options.unscaledWidth = $(element).width();
            }
            if ( options.unscaledHeight == 0 ) return;

            var maxDisplayHeight = $(window).height() - $(element).offset().top - options.bottomSpacing;
            var maxDisplayWidth = $(window).width() - $(element).offset().left - options.rightSpacing;
            var desiredHeight = maxDisplayHeight < options.unscaledHeight || options.upscaleImageHeight ? maxDisplayHeight : options.unscaledHeight;
            var desiredWidth = maxDisplayWidth < options.unscaledWidth || options.upscaleImageWidth ? maxDisplayWidth : options.unscaledWidth;
            var currHeight = $(element).height();
            var currWidth = $(element).width();

            if ( currHeight != desiredHeight || currWidth != desiredWidth ) {
                // keep aspect ratio
                if ( desiredHeight / options.unscaledHeight <= desiredWidth / options.unscaledWidth ) {
                    $(element).height(desiredHeight);
                    $(element).width(options.unscaledWidth * desiredHeight / options.unscaledHeight);
                } else {
                    $(element).height(options.unscaledHeight * desiredWidth / options.unscaledWidth);
                    $(element).width(desiredWidth);
                }
            }
        }
};

}(jQuery));

I added a full copy of the plugin code in order to prevent link inconsistencies in the future. — Anima-t3d, Jun 13 '14 at 09:07

Fitting image width to screen by preserving ratio and max size

2 Answers2