全屏模式在Materializecss

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

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>

我会解释它。在我的Modal里面，我有一个很大的图片和一些与图片重叠的组件。这意味着card-panel description重叠的图像，也是所有的btn-floating。但我的目标是图像是完整的width和全部height但垂直和水平对齐（所以当我调整大小，图像变小，但模态仍然保持它的全尺寸）。如果u需要更多的代码，请添加评论

来源

2016-11-16 greedsin

你试过了什么？堆栈溢出不是一个免费的编码service.try搜索和研究，并尝试编写一些代码。如果您遇到麻烦，您可以回到这里并提出正确的问题。这不是你自己的代码[最小，完整和可验证的例子]（http://stackoverflow.com/help/mcve） –

感谢您的回复，我不能在这里发布很多代码，因为它是一个非常大的项目。但我会编辑一些东西！ – greedsin

你可以在jsfiddle或狙击手中帮忙，或者让人打倒投票 –

我希望这是你想要达到

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

添加\

width: 100vw; 
height: 100vh;

到

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

造型和left: 10%;至.left-arrow
和right: 10%;到.right-arrow

来源

2016-11-16 15:43:14 Grey

。我希望模式在调整大小时保持居中，当窗口变大时应该没有滚动条。你能更新吗？ – greedsin

https://jsfiddle.net/n1eap8c3/200/摆脱滚动条，只需添加'overflow：hidden;'如更新的小提琴中所示 – Grey

全屏模式在Materializecss

回答

相关问题