随着浏览器高度的变化，在水平布局中调整图像大小答案

【问题标题】：Resize images in a horizontal layout as the browser height changes随着浏览器高度的变化，在水平布局中调整图像大小
【发布时间】：2014-01-31 10:53:35
【问题描述】：

我最近发现了以下网站：

https://www.bookworks.org.uk/publishing?content_type[]=output_book&min_price=0

该网站使用水平布局而不是垂直布局。阅读代码，我试图弄清楚他们是如何随着浏览器高度的变化而调整图像大小的。我想一些 jQuery 是必需的，但在我的一生中，我无法完全理解代码。

谁能给我指点一下，任何教程的链接都将不胜感激。

【问题讨论】：

标签： jquery html css image resize

【解决方案1】：

我发现该站点正在调用一个名为 resizeTimeline() 的函数，它使用了这个函数：

http://benalman.com/projects/jquery-resize-plugin/

或者这个：

https://github.com/roxeteer/jquery-afterresize

【讨论】：

我会检查这些链接。谢谢，jmercier。

【解决方案2】：

我会自己回答这个问题。我正在使用以下代码使水平布局响应：

HTML：

<div id="page">
    <div id="header">
    </div> 
    <div id="slides">
        <div class="slide"><img src="image01.jpg" /></div>
        <div class="slide"><img src="image02.jpg" /></div>
        <div class="slide"><img src="image03.jpg" /></div>
        ....
        <div class="slide"><img src="imageN.jpg" /></div>
    </div>
    <div id="footer">
    </div> 
</div>

CSS：

#slides {
    width: 100%;
    white-space: nowrap;
}

.slide {
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
}

jQuery：

jQuery(document).ready(function($){

    var $window = $(window),
        $header = $('#header'),
        $footer = $('#footer');

    var getHorizontalPageHeight = function () {
        return $window.height() - $header.outerHeight() - $footer.outerHeight();
    };

    var $slides = $('#slides'),
        $items = $slides.find('img, iframe');

    $items.each(function () {
        var $item = $(this),
            width = $item.data('width') || $item.attr('width') || 1,
            height = $item.data('height') || $item.attr('height') || 1;
        $item.data({
            height: height,
            ratio: width / height
        });
    });

    var resizer = function () {

        var contentHeight = getHorizontalPageHeight(),
            windowWidth = $window.width(),
            windowHeight = $window.height();

        $items.each(function () {

            var $item = $(this),
                originalHeight = $item.data('height'),
                height = contentHeight > originalHeight ? originalHeight : contentHeight,
                width,
                ratio = $item.data('ratio');

            // desktops and tablets (horizontal)
            if (windowWidth > 767) {

                width = height * ratio;

                $item.css({
                    width: width,
                    maxWidth: 'none',
                    height: width / ratio
                });

            // smartphones (vertical)
            } else {

                if ($item.is('iframe')) {
                    $item.css({
                        width: '100%',
                        maxWidth: height * ratio
                    });
                    $item.css('height', $item.width() / ratio);
                } else {
                    $item.css({
                        width: 'auto',
                        maxWidth: '100%',
                        height: 'auto'
                    });
                }

            }

        });

    };

    $window.on('resize', resizer);
    resizer();

});

【讨论】：