随着浏览器高度变化，调整水平布局中的图片大小 [英] Resize images in a horizontal layout as the browser height changes

问题描述

我最近找到了以下网站：

I have recently found the following site:

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

网站使用水平布局，而不是垂直布局。阅读代码，我试图找出他们如何管理调整图像的大小随着浏览器高度的变化。我想要一些jQuery是必需的，但对于我的生活我不能包装我的头围绕代码。

The site uses a horizontal layout instead of a vertical one. Reading the code, I've tried to figure out how they manage to resize the images as the browser height changes. I suppose that some jQuery is required but for the life of me I can't wrap my head around the code.

任何人都可以指向某个地方，任何链接到教程

Can anyone point me somewhere and any links to tutorials would be appreciated.

推荐答案

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

I'll answer the question myself. I'm using the following code to make a horizontal layout responsive:

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： b

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

});

这篇关于随着浏览器高度变化，调整水平布局中的图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！