Biegral Blog

对于PC端：

  轮播图一般的需求：高度固定，图片居中，容器铺满

<div class="item">
	<a class="pc_imgBox" href="#" style="background-image: url(图片路径)"></a>
</div>

    <style type="text/css">
      .pc_imgBox{
        display: block;
        height: 400px;
        width: 100%;
        /* 容器铺满的关键 */
        background-size: cover; 
        background-position:center;
        background-repeat: no-repeat;
        /* background-image: url(../images/slide_01_2000x410.jpg);   */
      }
    </style>

其中 background-size ：cover  把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要配合

background-position：center使用，因为只有这样，图片才能居中显示

对于M端

  轮播图一般的需求：宽度自适应，高度自动变化

<div class="carousel-inner" role="listbox">
	<div class="item active">
		<a class="m_imgBox" href=""><img src="../images/slide_01_640x340.jpg" alt=""></a>
	</div>
</div>

	<style type="text/css">
		.m_imgBox{
			display: block;
			width: 100%;
		}
		.m_imgBox img{
			display: block;
			width: 100%;
		}
	</style>