Question

我为我的画廊创建了一堆图像。我正在努力实现一些目标。

1）模态的透明背景。

2）中心图片

3）最大720px 960px。保持对较小设备的响应

这是我的问题的实例。 https://www.zachnewberry.com/gallery-backup.html

这是html

<div class="container margin-top">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 gallery-spacer"><li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="0"><img src="images/gallery/000.jpg" class="img-responsive gallery" alt="Placeholder image"></a></li></div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 gallery-spacer"><li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="1"><img src="images/gallery/001.jpg" class="img-responsive gallery" alt="Placeholder image"></a></li></div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 gallery-spacer"><li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="2"><img src="images/gallery/002.jpg" class="img-responsive gallery" alt="Placeholder image"></a></li></div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 gallery-spacer"><li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="3"><img src="images/gallery/003.jpg" class="img-responsive gallery" alt="Placeholder image"></a></li></div>
 </div>
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 gallery-spacer"><li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="4"><img src="images/gallery/004.jpg" class="img-responsive gallery" alt="Placeholder image"></a></li></div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 gallery-spacer"><li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="5"><img src="images/gallery/005.jpg" class="img-responsive gallery" alt="Placeholder image"></a></li></div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 gallery-spacer"><li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="6"><img src="images/gallery/006.jpg" class="img-responsive gallery" alt="Placeholder image"></a></li></div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 gallery-spacer"><li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="7"><img src="images/gallery/007.jpg" class="img-responsive gallery" alt="Placeholder image"></a></li></div>
 </div>
</div>
<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="modal-body">
<!--begin carousel-->
<div id="myGallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active gallery-modal"> <img src="images/gallery/000.jpg" alt="item0">
</div>
<div class="item gallery-modal"> <img src="images/gallery/001.jpg" alt="item1">
</div>
<div class="item gallery-modal"> <img src="images/gallery/002.jpg" alt="item2">
</div>
<div class="item gallery-modal"> <img src="images/gallery/003.jpg" alt="item3">
</div>
<div class="item gallery-modal"> <img src="images/gallery/004.jpg" alt="item4">
</div>
<div class="item gallery-modal"> <img src="images/gallery/005.jpg" alt="item5">
</div>
<div class="item gallery-modal"> <img src="images/gallery/006.jpg" alt="item6">
</div>
<div class="item gallery-modal"> <img src="images/gallery/007.jpg" alt="item7">
</div>
<!--end carousel-inner--></div>
<!--Begin Previous and Next buttons-->
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myGallery" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
<!--end carousel--></div>
<!--end modal-body--></div>
<div class="modal-footer">
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
<!--end modal-footer--></div>
<!--end modal-content--></div>
<!--end modal-dialoge--></div>
<!--end myModal--></div>

这是CSS

/* Gallery Page */

.gallery {
    max-height: 150px;
    min-height: 150px;
    min-width: 100%;
}

.gallery-spacer {
    padding-top: 25px;  
}
#myModal{
    z-index: 9999;
}
.gallery-modal {
    max-height: 100%;
    min-width: 100%;
    align: center;
}
.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    min-height: 100%;
    height: auto;
    border-radius: 0;
}

Answer 1

要删除背景颜色，请在.modal-content类中添加“background：transparent”。

.modal-content {
 min-height: 100%;
 height: auto;
 border-radius: 0;
 background: transparent;
}

要使图像居中，请使用边距：0自动，最大尺寸设置最大高度和最大宽度（假设您的平均宽度为720px，高度为960px）

.carousel-inner > .item > img {
 margin: 0 auto;
 max-width: 720px;
 max-height: 960px;
}

Bootstrap模态全屏图像

1 个答案: