Materializecss 中的全屏模式

Question

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

Codepen Link

对于我使用的图像：

max-width: 100%;
height: auto;

这是来自 materialize 的 responsive-img 类。

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

编辑2：my 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，但垂直和水平对齐（所以当我调整大小时，图像变小，但模态仍然保持完整大小）。如果您需要更多代码，请添加评论

Answer 1

我希望这是您想要实现的样式

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

已添加\

width: 100vw;
height: 100vh;

到

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

和left: 10%; 到.left-arrow
和right: 10%; 到.right-arrow