css - Materializecss 中的全屏模式

Question

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

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%; to .left-arrow
和 right: 10%; 到 .right-arrow