How to adjust the height of the pictures in the photo carousel?

Question

css

Hello! There is an owl carousel with pictures that may vary slightly in size.
How can I make sure that the pictures are displayed at the same height (without white indents), and when zooming, they do not hide under the base of the carousel, but fit on top and bottom of the blocks (marked green and yellow for clarity)?
UPD 1 : I solved the first part with the same height by fixing the blocks with the same height:

function setEqualHeight(columns){
    var tallestcolumn = 0;
    columns.each(function(){
        currentHeight = $(this).height();
        if(currentHeight > tallestcolumn){
            tallestcolumn = currentHeight;
        }
    });
    columns.height(tallestcolumn);
}

setEqualHeight($("#photo-gallery .owl-item"));

and height-align content styles:

#photo-gallery.owl-carousel .owl-item>div, #photo-gallery.owl-carousel .owl-item>div>a.photo, #photo-gallery.owl-carousel .owl-item img {
    height: 100%;
}

Читал, что можно еще как-то динамически при ресайзе вычислять высоту коллбеков при помощи <i>onRefresh: function () {}, onRefreshed: function () {}</i>. Не подскажите как?

Ну и остается еще вопрос с зумированием  и зазорчиками с левой-правой стороеы от блоков.

It is important to keep adaptability , which is why carousel settings are set!

Answer 1

Use flex, so you will have the same height and adaptively.