轮播图中，在一些较大屏幕范围内，图片高度不随屏幕大小改变；在一些较小的屏幕上，图片随屏幕大小自适应...

问题：轮播图中，在大屏幕和较大屏幕上（桌面端）要求图片的高度不随屏幕大小而改变，在较小屏幕上（移动设备）图片的大小随屏幕的大小而自适应

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

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

源代码：

html部分：

 1 <!--轮播图部分-->
 2 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 3     <!-- Indicators -->
 4     <ol class="carousel-indicators">
 5         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 6         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
 7         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
 8         <li data-target="#carousel-example-generic" data-slide-to="3"></li>
 9     </ol>
10 
11     <!-- Wrapper for slides -->
12     <div class="carousel-inner rotate" role="listbox">
13         <div class="item active">
14             <a href="#" class="large_screen hidden-sm hidden-xs"></a>
15             <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_01_640x340.jpg" alt=""></a>
16         </div>
17         <div class="item">
18             <a href="#" class="large_screen hidden-sm hidden-xs"></a>
19             <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_02_640x340.jpg" alt=""></a>
20         </div>
21         <div class="item">
22             <a href="#" class="large_screen hidden-sm hidden-xs"></a>
23             <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_03_640x340.jpg" alt=""></a>
24         </div>
25         <div class="item">
26             <a href="#" class="large_screen hidden-sm hidden-xs"></a>
27             <a href="#" class="mobile_a hidden-lg hidden-md"><img src="images/slide_04_640x340.jpg" alt=""></a>
28         </div>
29     </div>
30 
31     <!-- Controls -->
32     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
33         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
34         <span class="sr-only">Previous</span>
35     </a>
36     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
37         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
38         <span class="sr-only">Next</span>
39     </a>
40 </div>

css部分：

 1 /*轮播图样式*/
 2 .rotate{
 3     margin-top: 0;
 4 }
 5 .rotate .item a.large_screen{
 6     display:block;
 7     height:410px;
 8     background-size:cover;
 9     background-repeat: no-repeat;
10     background-position: center;
11 }
12 .rotate .item:first-child a.large_screen{
13     background-image: url("../images/slide_01_2000x410.jpg");
14 }
15 .rotate .item:nth-child(2) a.large_screen{
16     background-image: url("../images/slide_02_2000x410.jpg");
17 }
18 .rotate .item:nth-child(3) a.large_screen{
19     background-image: url("../images/slide_03_2000x410.jpg");
20 }
21 .rotate .item:last-child a.large_screen{
22     background-image: url("../images/slide_04_2000x410.jpg");
23 }
24 .rotate .item a.mobile_a{
25     display: block;
26     width:100%;
27 }
28 .rotate .item a.mobile_a img{
29     display: block;
30     width:100%;
31 }

 

 

　

 

转载于:https://www.cnblogs.com/qingqing-0919/p/7987839.html