Twitter bootstrap 引导模式全屏图像

我为我的画廊创作了一堆图片。我正在努力实现两件事

1）模态上的透明背景。

2）中心图像

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

这是我的问题的一个活生生的例子

这是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>

---

要删除背景色，请将“背景：透明”添加到.modal内容类中

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

要使图像居中，请使用边距：0自动，对于最大大小，请设置最大高度和最大宽度（假设您的意思是720px宽度和960px高度）

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

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