随着浏览器高度的变化,以水平布局调整图像大小

柠檬

我最近找到了以下站点:

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

该站点使用水平布局,而不是垂直布局。阅读代码,我试图弄清楚它们如何随着浏览器高度的变化来调整图像的大小。我想有些jQuery是必需的,但是对于我一生来说,我无法将代码包住头。

谁能指出我的位置,并且指向教程的任何链接将不胜感激。

柠檬

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

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

});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何随着浏览器宽度/高度的变化动态调整图像网格的大小?

来自分类Dev

当浏览器水平调整大小时,图像缩小

来自分类Dev

内容随着浏览器高度的变化而移动

来自分类Dev

如何水平布局内调整小部件的大小

来自分类Dev

如何使图像自动调整大小以适合浏览器窗口的高度

来自分类Dev

在浏览器窗口调整大小后找出新的图像宽度高度

来自分类Dev

更改浏览器宽度调整大小时的高度

来自分类Dev

CSS窗口根据浏览器高度调整大小

来自分类Dev

浏览器调整大小时布局中断

来自分类Dev

自动布局调整以适应不同的浏览器窗口大小

来自分类Dev

在浏览器大小上按行调整图像大小

来自分类Dev

调整浏览器大小时大图像会移动

来自分类Dev

调整浏览器大小时,大图像会移动

来自分类Dev

画布线宽会随着浏览器窗口大小的变化而变化,有什么想法可以解决吗?

来自分类Dev

如果浏览器的高度或宽度发生变化但保持比例,则缩放图像

来自分类Dev

如何确保DIV中的图像随浏览器调整大小而调整

来自分类Dev

调整浏览器窗口大小并截图

来自分类Dev

根据浏览器窗口的宽度和高度调整div样式的大小-jQuery

来自分类Dev

在浏览器高度上调整Chrome Squishing <img>的大小

来自分类Dev

图片的高度和宽度设置为100%,无法在Android浏览器中正确调整大小。

来自分类Dev

如何防止浏览器高度调整大小影响元素的位置

来自分类Dev

浏览器调整大小时,过渡将不适用于高度

来自分类Dev

调整浏览器窗口大小时,垂直/水平滚动条不会出现

来自分类Dev

调整浏览器窗口大小时,垂直/水平滚动条不会出现

来自分类Dev

在浏览器调整大小时水平缩小中间div

来自分类Dev

Twitter Bootstrap-调整浏览器窗口的大小-导致布局元素的位置

来自分类Dev

如何通过动态更改浏览器大小来使图像自动调整大小?

来自分类Dev

鼠标悬停时突出显示图像部分,以响应浏览器大小变化

来自分类Dev

图像之间的空间随着浏览器的缩小而增加

Related 相关文章

  1. 1

    如何随着浏览器宽度/高度的变化动态调整图像网格的大小?

  2. 2

    当浏览器水平调整大小时,图像缩小

  3. 3

    内容随着浏览器高度的变化而移动

  4. 4

    如何水平布局内调整小部件的大小

  5. 5

    如何使图像自动调整大小以适合浏览器窗口的高度

  6. 6

    在浏览器窗口调整大小后找出新的图像宽度高度

  7. 7

    更改浏览器宽度调整大小时的高度

  8. 8

    CSS窗口根据浏览器高度调整大小

  9. 9

    浏览器调整大小时布局中断

  10. 10

    自动布局调整以适应不同的浏览器窗口大小

  11. 11

    在浏览器大小上按行调整图像大小

  12. 12

    调整浏览器大小时大图像会移动

  13. 13

    调整浏览器大小时,大图像会移动

  14. 14

    画布线宽会随着浏览器窗口大小的变化而变化,有什么想法可以解决吗?

  15. 15

    如果浏览器的高度或宽度发生变化但保持比例,则缩放图像

  16. 16

    如何确保DIV中的图像随浏览器调整大小而调整

  17. 17

    调整浏览器窗口大小并截图

  18. 18

    根据浏览器窗口的宽度和高度调整div样式的大小-jQuery

  19. 19

    在浏览器高度上调整Chrome Squishing <img>的大小

  20. 20

    图片的高度和宽度设置为100%,无法在Android浏览器中正确调整大小。

  21. 21

    如何防止浏览器高度调整大小影响元素的位置

  22. 22

    浏览器调整大小时,过渡将不适用于高度

  23. 23

    调整浏览器窗口大小时,垂直/水平滚动条不会出现

  24. 24

    调整浏览器窗口大小时,垂直/水平滚动条不会出现

  25. 25

    在浏览器调整大小时水平缩小中间div

  26. 26

    Twitter Bootstrap-调整浏览器窗口的大小-导致布局元素的位置

  27. 27

    如何通过动态更改浏览器大小来使图像自动调整大小?

  28. 28

    鼠标悬停时突出显示图像部分,以响应浏览器大小变化

  29. 29

    图像之间的空间随着浏览器的缩小而增加

热门标签

归档