通过jQuery调整引导轮播中图像的顶部填充

Question

我有一个jquery可以获取所有幻灯片的高度，并使轮播幻灯片的高度与最高幻灯片的高度相同。对于不如最高的图像，我想在其包含的幻灯片中添加填充，以使图像在幻灯片中垂直居中。

目前仅在第一张幻灯片上这样做。关于我要去哪里的任何想法吗？

我的轮播标记：

<div id="carouselExampleControls" class="carousel slide w-100" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="~/images/landrover-header-tanks.jpg" class="d-block w-75 mx-auto" alt="Landrover header tanks made by Darton Fabrications" title="Darton Fabrications - Landrover header tanks" />
            </div>
            <div class="carousel-item">
                <img src="~/images/200tdi-discovery-defender-pipes.jpg" class="d-block w-75 mx-auto" alt="200tdi discovery defender pipes by Darton Fabrications" title="Darton Fabrications - 200tdi discovery defender pipes" />
            </div>
            <div class="carousel-item">
                <img src="~/images/tank.jpg" class="d-block w-75 mx-auto" alt="Another custom build by Darton Fabrications" title="Darton Fabrications - Another custom build for a satisfied customer" />
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

我的jQuery代码获取所有高度，将幻灯片的高度设置为等于最高的图像，并在需要将幻灯片垂直居中的位置添加填充到幻灯片中。

function carouselNormalization() {
        var items = $('#carouselExampleControls .carousel-item'), //grab all slides
            heights = [], //create empty array to store height values
            tallest; //create variable to make note of the tallest slide

        if (items.length) {
            function normalizeHeights() {
                items.each(function () { //add heights to array
                    heights.push($(this).height());
                });
                console.log(heights);
                tallest = Math.max.apply(null, heights); //cache largest value
                items.each(function () {
                    $(this).css('height', tallest + 'px');                                  
                });
                $('.carousel-inner').css('height', tallest + 'px');
                items.each(function () {
                    if ($(this).find("img").height() < tallest) {
                        $(this).css('padding-top', ((tallest - $(this).find("img").height()) / 2) + "px");
                        console.log(((tallest - $(this).find("img").height()) / 2));
                    }
                });                
            };
            normalizeHeights();

            $(window).on('resize orientationchange', function () {
                tallest = 0, heights.length = 0; //reset vars
                items.each(function () {
                    $(this).css('height', '0'); //reset min-height
                });
                normalizeHeights(); //run it again 
            });
        }
    }

    $(window).on('load', function () {
        carouselNormalization();
    });

目前，幻灯片本身的大小是可行的，但是填充部分仅在第一张幻灯片上起作用，之后其他幻灯片才被推出。