CSS Konusunda küçük bir yardım eli

Merhaba, herkese iyi forumlar dilerim.
Web sitem olan https://mt2pvpler.com/ üzerinde bir sorunum var ve yardımınıza ihtiyacım var. Ana sayfadaki üst banner görseliyle ilgili sıkıntı yaşıyorum.
Banner için sabit bir görsel yerleştirmek istiyorum, ancak responsive (duyarlı) yapıdan dolayı görsel sürekli kırpılıyor ya da orantısız görünüyor. Farklı denemeler yaptım ama görselin hep bir kısmı gözüküyor, tamamı görünmüyor.
Bu yüzden bir tasarımcıya net bir ölçü veremiyorum. Sorunum şu:
Bu banner için ideal boyutlar nedir?
Tasarımı yaptırırken hangi ölçülerde çalışılması gerektiğini nasıl belirleyebilirim? Görselin hem masaüstünde hem de mobilde doğru ve kırpılmadan görünmesini istiyorum.
Yardımcı olabilirseniz çok sevinirim.

.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

Çok teşekkür ederim işe yaradı
teşşekkür ederim arkadaşlar vakit ayırdığınız için @ustunweb; hocamın çözümü işe yaradı ilgi ve alakanızdan ötürü sağolun