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

Question

我希望能够显示一个宽度适合浏览器屏幕的图像，高度根据纵横比调整大小，并且图像不会变得比他的原始大小大。 我找到了this post，第一个答案中提供的链接有点像我想要的，但不完全是。它调整图像大小而不限制最大尺寸。我该怎么做？

---

答案中的代码：

(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

你不需要 JS。这种行为，可以通过简单的 CSS

轻松实现

DEMO

CSS：

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

解释：

max-width:100%; 属性规定元素的宽度不应超过容器宽度的 100%。因此，如果图像比容器宽，则将其缩小以适合容器内部并使用整个可用宽度。如果容器比图像宽，则图像保持其自然大小。

height:auto; 属性：

浏览器将计算并选择指定的高度 元素。 (MDN)

所以图片的纵横比是根据图片的宽度来保留的。

Answer 2

我已经修复了你在原帖中提到的代码。

Github repo 重写原始插件。

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

这解决了这个问题，因为它还考虑了视口高度，而纯 CSS 版本没有。它也是 OP 最初指出的发现的改进版本。

完整的插件代码：

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