CSS: Использование карусели с изображениями разного размера

Question

Извинения, если это очень простой вопрос, но я только начинаю работать с веб-разработчиком, и сейчас я совершенно не знаю!

Вы можете найти ссылку на мой (преступника) на сайте здесь: http://imranahmed.io/

Поэтому я хотел бы иметь прокрутки карусели на моей странице, и, чтобы сделать это, я использую flickity.

Проблема в том, что если вы посетите веб-сайт, вы увидите, что второе изображение переходит на третье изображение на полпути через страницу, а не на краю страницы (что делает его довольно неприятным - см. Пример ниже).

Теперь, мне было интересно, если есть способ получить DIV изображения в crop сам к max-width:100%, чтобы предотвратить это? Я попытался реализовать это в файле CSS, но безрезультатно (также функция обложки не дает мне ничего полезного)

Что мне здесь не хватает?

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

Я приложил соответствующие HTML и CSS код ниже:

HTML:

<div class="flickity-slider"> 
    {% for slider in site.data.slider %} 
    <div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div> 
    {% endfor %} 
</div> 

CSS:

.landing-page .flickity-slider{ 
    height: 30%; 
} 
.landing-page .carousel-cell{ 
    width: 100%; /* full width */ 
    height: 470px; /* height of carousel */ 
    max-height: 470px; 
    max-width: 100%; 
    margin-right: 10px; 
    display: inline-block; 
    position: relative; 

} 
.landing-page .carousel-image{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    max-width: 100% 
    max-height: 30% 
    object-fit: contain; 
} 

Я был бы признателен за любые советы! Благодаря!

Answer 1

Единственная проблема заключается в замене изображения в коде. Просто обновите приведенный ниже CSS в своем коде.

.landing-page .carousel-image{ 
    position: absolute; 
    transform: translate(0, -50%); 
    max-width: 100% 
    max-height: 30% 
    object-fit: contain; 
}