响应式轮播图容器选择

对于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>

猜你喜欢

转载自blog.csdn.net/wjf1997/article/details/104721671
今日推荐