Merhaba, anasayfada birkaç resim döndürüyorum. Farkettimki bazı ekranlarda örnek resimde görüldüğü gibi beyazlık olusuyor sığmama küçük gelme problemi yaşıyorum.

Aşağıda kodlar mevcut bu durumu nasıl çözebilirim?

<div class="slide-material slide-photo">
            <img src="image.jpg">
        </div>

.slide, .slide-material, .header-sub { height: 750px; }

@media (min-width: 1824px) { .slide, .slide-material, .header-sub { height: 969px; } }

@media (min-width: 480px) and (max-width: 767px) { .slide, .slide-material, .header-sub { height: 600px; } }

@media (max-width: 479px) { .slide, .slide-material, .header-sub { height: 500px; } }

.slide { position: relative; overflow: hidden; }

.slide-list { position: relative; top: 0; left: 0; }

.slide-list li { display: none; }

.slide-list li.is-active .slide-material img { -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); }

.slide-list li.is-active .heading, .slide-list li.is-active .text { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; }

.slide-material { overflow: hidden; position: relative; }

.slide-material img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 10s ease-in 0s; transition: all 10s ease-in 0s; }