我希望有一个带有图像的全屏模式和一些与图像重叠的按钮。 我找到了这个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
最满意答案
我希望这是你想要达到的造型
https://jsfiddle.net/n1eap8c3/198/
添加\
width: 100vw; height: 100vh;至
#modal{ display:block; width: 100vw; height: 100vh; }left: 10%; 到.left-arrow right: 10%; 到.right-arrow
I hope this is the styling you want to achieve
https://jsfiddle.net/n1eap8c3/198/
added\
width: 100vw; height: 100vh;to
#modal{ display:block; width: 100vw; height: 100vh; }and left: 10%; to .left-arrow and right: 10%; to .right-arrow
更多推荐
发布评论