标签:
大图在小屏幕下居中显示的2个方案
方案1
背景图的center center
方案2
子绝父相 left:50% margin-left:-width的一半
<!--#zw-carousel-->
<section id="zw-carousel" class="carousel slide" data-ride="carousel">
<!--活动指示器-->
<ol class="carousel-indicators">
<li data-target="#zw-carousel" data-slide-to="0" class="active"></li>
<li data-target="#zw-carousel" data-slide-to="1"></li>
<li data-target="#zw-carousel" data-slide-to="2"></li>
</ol>
<!--轮播内容-->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14752860565672788.jpg‘)">
</div>
<div class="item" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14749742777184602.jpg‘)">
</div>
<div class="item" style="background-image: url(‘http://caifu.weijinsuo.com/showNewsImage.do?pic=14760008303724222.jpg‘)">
</div>
</div>
<!--控制按钮-->
<a href="#zw-carousel" class="left carousel-control" role="button" data-slide="prev">
</a>
<a href="#zw-carousel" class="right carousel-control" role="button" data-slide="next">
</a>
</section>
#zw-carousel {
}
#zw-carousel .carousel-inner .item {
height: 340px;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
}
标签:
原文地址:http://www.cnblogs.com/WeWeZhang/p/5945305.html