Можно ли растянуть изображение в контейнере с динамически определяемыми шириной и высотой?

Question

[Олег Андрианов]

Уважаемые знатоки!
Использую Swiper slider, показывает одновременно 3 слайда, слайд состоит из изображения. Все изображения примерно одинаковых размеров, но тем не менее разные. Хочется чтобы все изображения имели одинаковую высоту.
Object-fit: cover не работает, т.к. размеры у слайда динамические,
position: absolute; top: 50%, left: 50%, transform: translate(-50%, -50%) тоже не работает, т.к. родитель опять-таки с динамическими размерами.
Можно переделать все изображения под одинаковый размер, но интересно было бы узнать есть ли какие-нибудь хаки в таких случаях.

Answer 1

[Антон Литвиненко]

Что значит размеры слайда динамические?
Два варианта для картинки с object-fit
1. Фиксированная высота слайда, картинке абсолют и обджект фит
2. Даём слайд паддинг топ например 56%. Картинке обсолют и обджект фит. В этом случае слайды всегда будут сохранять пропорции

Comments

[Олег Андрианов]

Допустим я захочу изменить количество слайдов в строке с 3-х до 2-х, тогда придется менять css-свойства, хочется этого избежать)
Swiper задает размер высоты для слайда через JS инлайново.

[Олег Андрианов]

Сработал второй способ
Родитель {padding-top: 56%;}
ребенок img {
position: absolute;
top: 0;
left: 0;
height: 100%;
object-fit: cover;
}

Спасибо за помощь!