In the css, you are selecting the elements by the alt attribute .imgj1, what you should do instead is, access them by their classes .mySlides. Furthermore, the snippet needs to have working images to work properly, as it is difficult to provide you with an answer.

Try wrapping the images in containing <div> element and adding width: 100% and height: 100% to both the images and the <div> element. If this does not work, then please fix the images so I can answer better.

So according to my understanding, you want the images to fill the entire parent container.

Try this:

<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;
}

You need css rule with img to 100% of your imgContainer container

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**************^^^

So doing this does contain the image within the div.

However, using width 100%, and height 100% only gives me 100% of the size of the image that is sitting in the div. it does not stretch it across the 100% width of the screen, as the div does.

I'm looking to take any image, and completely fill the containing div with it. I know this is possible via javascript. There is just not a lot it out there that I can find.