En el css, está seleccionando los elementos por el atributo alt .imgj1 , lo que debe hacer en su lugar es acceder a ellos por sus clases .mySlides . Además, el fragmento debe tener imágenes de trabajo para funcionar correctamente, ya que es difícil proporcionarle una respuesta.

Intente envolver las imágenes para contener el elemento <div> y agregue width: 100% y height: 100% tanto a las imágenes como al elemento <div> . Si esto no funciona, corrija las imágenes para que pueda responder mejor.

Entonces, según tengo entendido, desea que las imágenes llenen todo el contenedor principal.

Prueba esto:

 <div class="imgContainer"> <div class="mySlides"> <img class="slideImage" src="{image_src}" alt="imgj1"> </div> <div class="mySlides"> <img class="slideImage" src="{image_src}" alt="imgj2"> </div> <div class="mySlides"> <img class="slideImage" src="{image_src}" alt="imgj3"> </div> </div>

 .imgContainer { padding-top: 80px; background-color: rgba(0, 0, 0, 0.603); width: 100%; height: 575px; } .mySlides { width: 100%; height: 100%; } .slideImage { width: 100%; height: 100%; object-fit: cover; }

Necesita una regla css con img al 100% de su contenedor imgContainer

 var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // Change image every 2 seconds }

 .imgContainer { padding-top: 80px; background-color: rgba(0, 0, 0, 0.603); width: 100%; height: 575px; } .imgContainer img { width:100% } .img1 { max-width: 100%; max-height: 100%; object-fit: cover; }

 <div class="imgContainer" alt="imgContainer"> <img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 1&font=lobster" alt="imgj1"> <img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 2&font=lobster" alt="imgj1"> <img class="mySlides" src="https://fakeimg.pl/400x200/?text=Img 3&font=lobster" alt="imgj1"> </div>

 .imgContainer { padding-top: 80px; background-color: rgba(0, 0, 0, 0.603); width: 100%; height: 575px; } vvv**************Actually Works to an extent**************vvv .mySlides { max-height: 100%; max-width: 100%; object-fit: contain; } ^^^**************Actually Works to an extent**************^^^

Entonces, hacer esto contiene la imagen dentro del div.

Sin embargo, usar ancho 100% y alto 100% solo me da el 100% del tamaño de la imagen que se encuentra en el div. no lo estira al 100% del ancho de la pantalla, como lo hace el div.

Estoy buscando tomar cualquier imagen y llenar completamente el div contenedor con ella. Sé que esto es posible a través de javascript. Simplemente no hay mucho por ahí que pueda encontrar.