.banner-slide img css'de buna object-fit:cover yerine object-fit: contain olmalı

Bul

.banner-slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

Değiştir

.banner-slide img {
 width: 100%;
height: 100%;
 object-fit: contain;
}

max-width: 100%
height: auto

vermen gerekiyor eğer ölçü verirsen tam olmaz hiç bir zaman. illaki ölçü vereceksende @media (max-width: 576.99px) altına mobil ölçünü verebilirsin.

.banner-swiper .swiper-slide {
    width: 100% !important;
    max-width: 1200px;
}

.banner-slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 768px) {
    .banner-slide img {
        height: 120px;
    }
}

Bunu dene olmazsa responsive resime geçersin

[

<picture>
    <source media="(max-width: 768px)" srcset="banner-mobile.jpg">
    <source media="(max-width: 1024px)" srcset="banner-tablet.jpg">
    <img src="banner-desktop.jpg" alt="Banner" class="img-fluid">
</picture>

• Desktop: 1200x200px (mevcut)
• Tablet: 768x150px
• Mobile: 480x100px