身体中的图像应覆盖整个高度，直到滚动为止

Question

因此，我在网站上更改了图像（不是背景图像）（每6秒更改一次），并且希望它覆盖整个显示器（标题除外），直到向下滚动为止。我不知道如何做到这一点。我尝试使用以下位置：固定，但引起了很多问题。有人知道我可以在自己的网站上执行此操作的最佳方法吗？该网站是www.mh-rp.com。请参阅下面的相关代码和图像：

enter image description here

    <main>
    <div class="image_container" style="max-width:100%">
    <img class="mySlides" src="/images/1.png" style="width:100%">
    <img class="mySlides" src="/images/2.png" style="width:100%">
    <img class="mySlides" src="/images/3.png" style="width:100%">
    <img class="mySlides" src="/images/4.png" style="width:100%">
    <img class="mySlides" src="/images/5.png" style="width:100%">
    <img class="mySlides" src="/images/6.png" style="width:100%">
    <img class="mySlides" src="/images/7.png" style="width:100%">
    <img class="mySlides" src="/images/8.png" style="width:100%">
    <img class="mySlides" src="/images/9.png" style="width:100%">
    <img class="mySlides" src="/images/10.png" style="width:100%">
    <img class="mySlides" src="/images/11.png" style="width:100%">
    <div class="maintext">Mulholland Roleplay</div>
    <img class="ipimage" src="/images/sa-mp.png">
    <span class="mainip">57.80.79.165:1050</span>
    <a class="mainbutton" href="https://www.forum.mh-rp.com/wiki/game-server/">Play Now</a>
    </div>

    var myIndex = 0;
    carousel();

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

    body
    {
    overflow-x: hidden;
    }

    .image_container
    {
    position:relative;
    }

    .maintext
    {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Staatliches", "Arial", sans-serif;
    font-weight:normal;
    font-style:normal;
    font-size: 72px;
    }

    .mainip
    {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Staatliches", "Arial", sans-serif;
    font-weight:normal;
    font-style:normal;
    font-size: 32px;
    }

    .ipimage
    {
    position: absolute;
    top: 53%;
    left: 43.2%;
    width: 32px;
    }

    .mainbutton
    {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: "Staatliches", "Arial", sans-serif;
    font-weight:normal;
    font-style:normal;
    font-size: 32px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    transition: border-width 0.3s;
    padding: 5px 5px 5px 5px;
    }

    .mainbutton:hover
    {
    border-width: 3px;
    padding: 5px 5px 5px 5px;
    }

    @media (max-width: 1200px)
    {
    .maintext
    {
        font-size: 36px;
    }
    .mainbutton
    {
        font-size: 16px;
    }
    }

    @media (max-width: 800px)
    {
    .maintext
    {
        font-size: 18px;
    }
    .mainbutton
    {
        font-size: 8px;
    }
    }