2017年8月25日 星期五

,

Bootstrap 輪播高度一致


本文的程式碼來自於 https://fantasyworld.idv.tw/2015/1542


$(function () {
    carouselNormalization();
});
function carouselNormalization() {
    var items = $('.carousel .carousel-inner .item'), heights = [], tallest, bwidth, height, width;
    if (items.length) {
        function normalizeHeights() {
            bwidth = $('.carousel').width();
            items.each(function () {
                height = $(this).height();
                width = $(this).width();
                if (width > bwidth) {
                    height = height * (bwidth / width);
                }
                heights.push(height);
            });
            tallest = Math.max.apply(null, heights);
            if (tallest > bwidth) {
                tallest = bwidth;
            }
            items.each(function () {
                $(this).css('height', tallest + 'px');
            });
        };
        normalizeHeights();
        $(window).on('resize', function () {
            bwidth = $('.carousel').width();
            heights = [];
            items.each(function () {
                $(this).css('height', 'auto');
            });
            normalizeHeights();
        });
    }
}


.carousel-inner{height: 300px;}

.img{width:100%;}



Share:
Read More

2017年8月17日 星期四

2017年8月15日 星期二