Пейзаж и портретные изображения в карусели бутстрапа: высота и ширина в ответном макете

Question

У меня есть несколько изображений: пейзажные изображения 1024 * 682, а портретные изображения - 685 * 1024. Как вы можете себе представить, бросание их в карусель бутстрапа приводит к тому, что высота карусели изменяется, когда изображения скользят. Для того, чтобы предотвратить это, а также центр портретных ориентированных изображений в карусели, я положил в следующем CSS:

.carousel-inner .item img { 
    max-height: 682px; 
    height: auto; 
    width: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

Это, кажется, работает как задумано, пока видимая область не станет примерно меньше ландшафтном изображений ширина (1024 пикселей). На этом этапе высота изображения остается (пропорционально) постоянной, но масштабирует ширину изображения так, что она теряет соотношение сторон. Что мне нужно сделать для css, чтобы предотвратить масштабирование ширины, но поддерживать гибкое масштабирование и максимальную высоту 682?

Answer 1

Что вам нужно сделать - при запуске И window.resize - повторить каждое изображение и установить желаемую высоту, которая обычно является высотой первого изображения в вашем слайд-шоу/галерее. Вот пример, который я написал для своего fav. слайдер BX-слайдер:

function resizeslider(){ 
// the second Li seems to be the first image in the slider, so measure itys height: 
    hli= $(".bx-viewport li:nth-child(2)").height(); 
    //console.log(hli); 
    $(".bx-viewport").height(hli) 
    $(".bx-viewport img").each(function(){ 
     $(this).height(hli); 
    }) 

}