Fullscreen modal in Materializecss

Question

I want to have an fullscreen modal with an image and some buttons overlapping the image. I found this codepen, which shows how i want my modal to look like (width and height). The biggest Problem itself is the image for me. Since it either causes a scrollbar or , when responsive, is much smaller than the modal. Here is codepen i found, which shows how i want the modal.

Codepen Link

For the image i use:

max-width: 100%;
height: auto;

which is the responsive-img class from materialize.

How would i place an image inside this modal, so that it fills out the modal. And when i resize the window, the Image should stay vertically and horizontally aligned This should also be responsive. Any ideas?

Edit2: my Jsfiddle

Edit :

<div id="modal" class="modal blue-grey darken-4 "">
    <img class="responsive-img ">

    <div class="card-panel description ">
        <h4 class="white-text truncate ">Title</h4>
        <h6 class="white-text truncate ">Description</h6>
    </div>

    <a class="btn-floating btn-large waves-effect waves-light blue-grey darken-3 hoverable left-arrow ">
        <i class="icon-control material-icons medium ">chevron_left</i> 
    </a>
    <a class="btn-floating btn-large waves-effect waves-light blue-grey darken-3 hoverable right-arrow ">
        <i class="icon-control material-icons medium ">chevron_right</i>
    </a>
    <a class="btn-floating btn-large waves-effect waves-light blue-grey darken-3 hoverable back-button ">
        <i class="icon-control material-icons medium ">clear</i>
    </a>
    <a class="btn-floating btn-large waves-effect waves-light blue-grey darken-3 hoverable pano-icon ">
        <i class="icon-control material-icons medium ">3d_rotation</i>
    </a>
    <div class="panel-loader-background">
        <div class="preloader-wrapper big active panel-loader">
            <div class="spinner-layer spinner-blue-only">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="gap-patch">
                <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
                <div class="circle"></div>
            </div>
        </div>
    </div>
</div>

I will explain it. Inside my Modal i have a big Image, and some Components that are overlapping the Image. This means card-panel description is overlapping the image and also all the btn-floating.

However my goal is that the image is full width and full height but vertically and horizontally aligned(so when i resize, the image gets smaller, but the modal still keeps it full size). if u need more code, pls add a comment

Answer 1

I hope this is the styling you want to achieve

https://jsfiddle.net/n1eap8c3/198/

added\

width: 100vw;
height: 100vh;

to

#modal{
    display:block;
    width: 100vw;
    height: 100vh;
}

and left: 10%; to .left-arrow
and right: 10%; to .right-arrow