How to make image inside div tag always a percentage larger than the container?

I'm currently using parallax.js (https://github.com/wagerfield/parallax) to get a parallax effect on a hero image on my page. I am trying to use a div tag to use as a "frame" so the image doesn't "appear" floating. I basically want the image to be a percentage larger than the div tag so as the image moves the container is fully covered by the image. This is what's happening. And not what I want. Hope this makes sense.

TIA

Here is my code:

<div id="scene" data-relative-input="true" class="float-image" style="border: 20px solid red; overflow: hidden;">
                <img src="img/#.jpg" data-depth="0.2" class="cover-img">
                <img src="img/#.png" data-depth="0.1" class="cover-img">
</div>

CSS:

#scene {
    position: relative;
}

.cover-img {
    max-height: 100%;
    max-width: 100%;
 }

.float-image {
z-index: -1;
object-fit: cover;
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}