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

Question

我希望能够显示宽度适合浏览器屏幕的图像,并根据纵横比调整高度,图像不会比原始尺寸大.我发现这篇文章和第一个答案中提供的链接有点像我想要的但不完全正确.它调整图像大小,对最大尺寸没有任何限制.我怎样才能做到这一点？

---

答案的代码:

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

因此,根据图像的宽度保留图像的纵横比.