輪播圖中，在一些較大屏幕范圍內，圖片高度不隨屏幕大小改變；在一些較小的屏幕上，圖片隨屏幕大小自適應

問題：輪播圖中，在大屏幕和較大屏幕上（桌面端）要求圖片的高度不隨屏幕大小而改變，在較小屏幕上（移動設備）圖片的大小隨屏幕的大小而自適應

解決思路：設置兩個同級的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%;
}