Как адаптировать изображение с фиксированной высотой?

Question

[Дмитрий Жуков]

Есть owl карусель, показывающее одно изображение за раз (на всю ширину экрана).
В стандартном варианте адаптивно изображение пропорционально уменьшается при уменьшении экрана.
Но в мобильных версиях, конечно, изображение получается слишком узким по вертикали, т.к. стремится втиснуть себя по ширине.
Хочется сделать фиксированную высоту, но при уменьшении экрана, изображение не должно втискивать себя, а обрезать/прятать свои края по горизонтали.
Как это реализовать?



Изображение не должно быть фоновым, т.к. должно вставляться cms.

overflow в каруселе не срабатывает

Answer 1

[DivineDraft]

установите min-height для img, а для блока в котором находится он display:flex;align-items:center;justify-content:center;flex-flow:column;

Comments

[Дмитрий Жуков]

Теперь в слайдере одновременно находятся половина первого изображения и половина второго.

[DivineDraft]

Предоставьте пожалуйста ссылку на ресурс.

[Дмитрий Жуков]

DivineDraft, demo6.bon-site.ru

[DivineDraft]

Дмитрий Жуков, попробуйте

.header-slider-item .slider-img img {
    min-height: 200px;
    width: inherit;
    min-width: 100%;
    height: inherit !important;
    width: auto !important;
}

body .header-slider .header-slider-item .slider-img {width:100%;overflow:hidden;}

[Дмитрий Жуков]

DivineDraft, спасибо большое, голова уже не варит