Adjust height of an image to a div

I'm doing a website for a project at my university. It turns out that on my website I had a background image with a size of 1920x1080 that took up the entire wallpaper but by reducing the height of the main banner to 75vh (before it was at 100vh) it cuts out the image below and there is no way I can achieve it Frame the image well, not even reducing the size of the image manually.

My html:

  <section id="banner">
            <article>
            <img id="bannerimagen01" src="fondo.jpg" alt="" />  
            </article>
  </section>

My css:

#banner {
    min-height: 75vh;
    height: 75vh;
    position: relative;
}

#banner > article {
        -moz-transition: opacity 1.5s ease, visibility 1.5s;
        -webkit-transition: opacity 1.5s ease, visibility 1.5s;
        -ms-transition: opacity 1.5s ease, visibility 1.5s;
        transition: opacity 1.5s ease, visibility 1.5s;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        text-align: center;
        top: 0;
        visibility: hidden;
        width: 100%;
        z-index: 0;
    }