通过保留比例和最大尺寸使图像宽度适合屏幕

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

Answer 1

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.

Answer 2

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