Materialisecss中的全屏模态(Fullscreen modal in Materializecss)

我希望有一个带有图像的全屏模式和一些与图像重叠的按钮。我找到了这个codepen，它显示了我希望我的模态看起来像（宽度和高度）。最大的问题本身就是我的形象。因为它要么导致滚动条，要么响应时，比模态小得多。这是我发现的codepen，它显示了我想要的模态。

Codepen链接

对于我使用的图像：

max-width: 100%; height: auto;

这是来自物化responsive-img类。

如何将图像放置在此模态中，以便填充模态。当我调整窗口大小时，图像应保持垂直和水平对齐。这也应该是响应。有任何想法吗？

Edit2：我的Jsfiddle

编辑：

<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>

我会解释一下。在我的模态中，我有一个很大的图像，以及一些与图像重叠的组件。这意味着card-panel description与图像以及所有btn-floating重叠。

然而，我的目标是图像是全width和全height但垂直和水平对齐（所以当我调整大小时，图像变小，但模态仍保持全尺寸）。如果你需要更多代码，请添加评论

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