Как изменить размер изображения слайдера, чтобы точно вписаться на высоту 80 ВНГ без обрезки в CSS? ⇐ Html

[Anonymous]

У меня есть домашняя страница с верхним заголовком, а под ним-ползунок. есть пробелы.


@for (slider of sliders; track slider.id){








}



< /code>
.home-slider {
position: relative;
bottom: 0;
height: 100%;
}
.swiper-slide {
min-height: 80vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
< /code>
What I tried:
object-fit: cover; → Crops the image.
object-fit: contain; → Leaves empty space.
Setting height in px → Breaks on different screen sizes.
Goal:
Image should be exactly 80vh in height.
Should scale proportionally in width.
Should work responsively on desktop and mobile.
No cropping or distortion.
Question:
How can I set CSS so the image always fits exactly 80vh high, scales proportionally in width, and works across devices?

Подробнее здесь: https://stackoverflow.com/questions/797 ... pping-in-c