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

通过保留比率和最大尺寸将图像宽度拟合到屏幕

2 个答案: