Как вертикально центрировать изображения в слайдере, растягивая на всю ширину?

Question

[BarneyGumble]

Есть горизонтальный слайдер. Ширина 100%, высота фиксированная 400px. Картинки в слайдер попадают динамически. И картинки эти всегда разные: какие-то вертикально-ориентированные, какие-то горизонтально. В случае с вертикально ориентированными всё плохо. Либо вот так выводить:


Либо так:


Но как можно центрировать картинки растягивая на всю ширину без использования всяких background-position и т.д.? Чтобы было так:


Есть какие-то решения?

Comments

[A K]

Вы думаете вы первый с такой проблемой? Пользуйтесь поиском.

[Ankhena]

Вам помогут:
flex
max-width: 100%
object-fit

[BarneyGumble]

Ankhena, спасибо!
object-fit - то, что надо, не знал про него

Answer 1

[t00rt]

Если картинки ставить через css то можно так:

background: url(../img.jpeg) center no-repeat;
background-size: cover;