艾利百科--临沂网站制作,临沂网页设计,临沂微信公众号,兼容并蓄,开放共赢!

艾利百科

当前位置: 主页 > 网站制作 > Bootstrap >

Bootstrap轮播图图片大屏高度不变小屏自适应

时间:2018-06-10 18:25来源:未知 作者:kunbeatable 点击:
问题:轮播图中,在大屏幕和较大屏幕上(桌面端)要求图片的高度不随屏幕大小而改变,在较小屏幕上(移动设备)图片的大小随屏幕的大小而自适应 解决思路:设置两个同级的a标签,给第一个a标签设置背景图片,其background-size设置为cover,并给a标签添加类:
问题:轮播图中,在大屏幕和较大屏幕上(桌面端)要求图片的高度不随屏幕大小而改变,在较小屏幕上(移动设备)图片的大小随屏幕的大小而自适应

解决思路:设置两个同级的a标签,给第一个a标签设置背景图片,其background-size设置为cover,并给a标签添加类:class=''hidden-xs hidden-sm'',让其在小屏幕上隐藏;

第二个a标签添加类:class=''hidden-lg hidden-md'',让其在小屏幕上显示,在大屏幕上隐藏,并给a标签下的img标签设置样式,width:100%,display:block;让其宽高随屏幕大小自动改变。

源码:

HTML部分

<!--轮播图部分-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
 
    <!-- Wrapper for slides -->
    <div class="carousel-inner rotate" role="listbox">
        <div class="item active">
            <a href="#" class="large_screen hidden-sm hidden-xs"></a>
            <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_01_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="large_screen hidden-sm hidden-xs"></a>
            <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_02_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="large_screen hidden-sm hidden-xs"></a>
            <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_03_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="large_screen hidden-sm hidden-xs"></a>
            <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_04_640x340.jpg" alt=""></a>
        </div>
    </div>
 
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

CSS样式部分:

/*轮播图样式*/
.rotate{
    margin-top: 0;
}
.rotate .item a.large_screen{
    display:block;
    height:410px;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
}
.rotate .item:first-child a.large_screen{
    background-image: url("../images/slide_01_2000x410.jpg");
}
.rotate .item:nth-child(2) a.large_screen{
    background-image: url("../images/slide_02_2000x410.jpg");
}
.rotate .item:nth-child(3) a.large_screen{
    background-image: url("../images/slide_03_2000x410.jpg");
}
.rotate .item:last-child a.large_screen{
    background-image: url("../images/slide_04_2000x410.jpg");
}
.rotate .item a.mobile_a{
    display: block;
    width:100%;
}
.rotate .item a.mobile_a img{
    display: block;
    width:100%;
}

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片