Question

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

Codepen Link

对于我使用的图像：

max-width: 100%;
height: auto;

是物化的responsive-img类。

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

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

Materialisecss中的全屏模态

1 个答案: