Javascript 如何使用引导转盘以小分辨率避免横向图像上方和下方的边距？

我们使用

Bootstrap Carousel

+

Hammer.swip

+

photoswip

构建了一个图库 如果画廊里只有风景画或肖像画，一切都很顺利。
但是当我们在小分辨率下测试它时，同时在风景画中有肖像画，然后画廊将容器的高度设置为最高的肖像，结果是每个风景画图像上下都有很大的白色边缘

如何在mobile view中删除横向图像的边距

下面是一个简化的代码：

// carousel.js
var Carousel = (function($, viewport) {
    function init() {
        var $carousels = $('.carousel');
        $.each($carousels, function() {
            var $carousel = $(this);
            swipeHorizontalMobile($carousel, viewport);
            imageNavListener($carousel);
            updateArrowVisibility(0, $carousel);
        });
    }

    // implementation of the rest of the code

    return {
        init: init
    };
})(jQuery, ResponsiveBootstrapToolkit);

---

原来在

转盘内部

和

滑块照片包装

元素中有一些预先计算的固定值。
我决定根据最高的景观限制高度，并覆盖这些元素的值

我面临的问题：

• 在使用图像之前，我必须确保已加载图像，否则我无法获取它们的

  宽度

  和

  高度

• 如何获得缩放图像的大小？最后，我绕过它并使用原始大小，因为我只需要

  宽度

  与

  高度

  的比率，就可以根据旋转木马容器的宽度计算出最大

  高度

• 我无法使用

  getBoundingClientRect（）

  ，因为对于未显示（显示：隐藏）的图像，它返回0，并且只有第一个图像显示在

  引导转盘中

我们从主代码调用

CarouselNormalization.init（$carousel）

，在主代码中我们在库中循环：

// carousel.js
var Carousel = (function($, viewport) {
    function init() {
        var $carousels = $('.carousel');
        $.each($carousels, function() {
            var $carousel = $(this);
            swipeHorizontalMobile($carousel, viewport);
            imageNavListener($carousel);
            updateArrowVisibility(0, $carousel);

            // fixes the size of the carousel images/containers mainly for mobile devices
            CarouselNormalization.init($carousel);
        });
    }

    // implementation of the rest of the code

    return {
        init: init
    };
})(jQuery, ResponsiveBootstrapToolkit);

下面的代码是与我的同事以结对编程的方式编写的，我们使用了

//carousel_normalization.js
/**
*根据最高的景观图像更改旋转木马容器的最大高度
*并防止在小分辨率的横向图像上方和下方有较大的边距
*/
var CarouselNormalization=（函数（$）{
var$carousel，
$photoWrappers，
$imgs；
函数init（$inputCarousel）{
$carousel=$inputCarousel；
$imgs=$carousel.find（'.item img'）；
如果（$imgs.length<1）{
返回；
}
$photoWrappers=$carousel.find（'.item.slider照片包装器'）；
var imgsLoadedCount=0；
$imgs.one（'load'，function（）{
imgsLoadedCount++；
if（imgsLoadedCount<$imgs.length）{
返回；
}
标准化权重（）；
$（窗口）.on（'resize orientationchange'，function（）{
标准化权重（）；
});
}).每个（功能）{
如果（完成此项）{
$（this.trigger（'load'）；
}
});
}
/**
*发现最高的风景
*将其高度用作css中定义的“滑块照片包装器”和“旋转木马内部”的最大高度
*/
函数规格化权重（）{
风险值宽度=[]；
var高度=[]；
var maxWidth=$carousel.width（）；
$imgs.每个（函数（）{
var width=$（this.prop（'naturalWidth'）；
变量高度=$（this.prop（'naturalHeight'）；
如果（宽度>高度）{
宽度。推动（宽度）；
高度。推（高度）；
}
});
if（宽度.长度<1 | |高度.长度<1）{
返回；
}
var tallestLandscapeHeight=Math.max.apply（空，高度）；
var tallestLandscapeWidth=宽度[高度.索引of（tallestLandscapeHeight）]；
var maxHeight=maxWidth*tallestLandscapeHeight/tallestLandscapeWidth；
$photoWrappers.css（'height'，maxHeight）；
$carousel.find（'.carousel-inner'）.css（'height'，maxHeight）；
}
返回{
init:init
};
})（jQuery）；

// carousel_normalization.js
/**
 * changes the maximum height of the carousel containers based on the tallest landscape image
 * and prevents to have big margins above and below landscape images in small resolution
 */
var CarouselNormalization = (function ($) {
    var $carousel,
        $photoWrappers,
        $imgs;


    function init($inputCarousel) {
        $carousel = $inputCarousel;
        $imgs     = $carousel.find('.item img');

        if ($imgs.length < 1) {
            return;
        }

        $photoWrappers = $carousel.find('.item .slider-photo-wrapper');

        var imgsLoadedCount = 0;

        $imgs.one('load', function () {
            imgsLoadedCount++;

            if (imgsLoadedCount < $imgs.length) {
                return;
            }

            normalizeHeights();

            $(window).on('resize orientationchange', function () {
                normalizeHeights();
            });
        }).each(function () {
            if (this.complete) {
                $(this).trigger('load');
            }
        });
    }

    /**
     * finds the tallest landscape
     * uses its height as maximum height for the 'slider-photo-wrapper' defined in the css and for the 'carousel-inner'
     */
    function normalizeHeights() {
        var widths = [];
        var heights = [];
        var maxWidth = $carousel.width();

        $imgs.each(function () {
            var width  = $(this).prop('naturalWidth');
            var height = $(this).prop('naturalHeight');

            if (width > height) {
                widths.push(width);
                heights.push(height);
            }
        });

        if (widths.length < 1 || heights.length < 1) {
            return;
        }

        var tallestLandscapeHeight = Math.max.apply(null, heights);
        var tallestLandscapeWidth  = widths[heights.indexOf(tallestLandscapeHeight)];
        var maxHeight              = maxWidth * tallestLandscapeHeight / tallestLandscapeWidth;

        $photoWrappers.css('height', maxHeight);
        $carousel.find('.carousel-inner').css('height', maxHeight);
    }

    return {
        init: init
    };
})(jQuery);