Fullscreen modal in Materializecss
<p>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.</p>

<p><a href="http://codepen.io/ThomasBurleson/full/EjrYgX/" rel="nofollow noreferrer">Codepen Link</a> </p>

<p>For the image i use:</p>

<pre><code>max-width: 100%;
height: auto;
</code></pre>

<p>which is the <code>responsive-img</code> class from materialize.</p>

<p>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 <strong>vertically</strong> and <strong>horizontally</strong> aligned This should also be responsive. Any ideas?</p>

<p>Edit2: <a href="https://jsfiddle.net/n1eap8c3/197/" rel="nofollow noreferrer">my Jsfiddle </a></p>

<p>Edit :</p>

<pre><code>&lt;div id="modal" class="modal blue-grey darken-4 ""&gt;
    &lt;img class="responsive-img "&gt;

    &lt;div class="card-panel description "&gt;
        &lt;h4 class="white-text truncate "&gt;Title&lt;/h4&gt;
        &lt;h6 class="white-text truncate "&gt;Description&lt;/h6&gt;
    &lt;/div&gt;

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

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

<p>However my goal is that the image is full <code>width</code> and full <code>height</code> 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</p>