Проблема: swiperjs растягивался на всю шину станицы, но картинку он позиционировал по верхнему левому углу и, при сжатии экрана, он ее обрезал.
Как было (на большом и среднем разрешении):
Как стало (на большом и среднем разрешении):
Как растянуть картинка по центру swiperjs
29.06.2022
Код блока:
<div id="mp-info-slider" class="swiper">
<div class="swiper-wrapper">
<?
foreach($arResult['items'] as $aItem) {
?>
<div class="swiper-slide">
<div class="img">
<img src="<?=$aItem['img']?>" alt="<?=htmlspecialchars($aItem['title'])?>">
</div>
</div>
<?
}
?>
</div>
<div class="swiper-pagination"></div>
</div>
Решение: зафиксировать высоту, потом утилитарному класс swiper-slide .img добавить height: 100%;. А для самой картинки задать нужный вариант отображения:
#slider_top .swiper-slide {
height: 50vh;
}
#slider_top .swiper-slide .img {
height: 100%;
}
#slider_top .swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
}