Bootstrap-3旋转木马中的图像自动调整大小

Question

我有一个Bootstrap-3旋转木马，每次显示3个图像。每轮有三个图像四轮。我希望图像可以自动调整大小以适应每个设备尺寸（大型桌面，平板电脑，手机）的最佳宽度和高度。举例来说，手机将拥有100x100大型桌面300x300。而且，无论上传的尺寸如何，图像都可以缩放到每个设备的最佳尺寸。我知道解决方案在于：

max-width:100%; 
max-height:100%; 

但是，如何定义我的div（S）的最佳高度和宽度？而且，由于每个设备尺寸都有多个div类，是否可以设置最佳的最大化高度和宽度？

这里链接到我的bootply。

Bootply

这里我的代码HTML：

<div class="carousel-home"> 
<div class="carousel slide" data-ride="carousel" id="carousel-example- generic"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li class="active" data-slide-to="0" data-target="#carousel-example-generic"></li> 
     <li data-slide-to="1" data-target="#carousel-example-generic"></li> 
     <li data-slide-to="2" data-target="#carousel-example-generic"> </li> 
    </ol><!-- Slider Content (Wrapper for slides)--> 

    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="col-md-4 col-sm-6"> 
       <img alt="" src="http://placehold.it/250x100&amp;text=AAAAAAA"> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-xs"> 
       <img alt="" src="http://placehold.it/350x145&amp;text=BBBBBB"></div> 

      <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> 
       <img alt="" src="http://placehold.it/225x300&amp;text=CCCCCCC"> 
      </div> 
     </div> 

     <div class="item"> 
      <div class="col-md-4 col-sm-6"> 
       <img alt="" src="http://placehold.it/250x250&amp;text=DDDDDDD"> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-xs"> 
       <img alt="" src="http://placehold.it/250x150&amp;text=EEEEEEEE"> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> 
       <img alt="" src="http://placehold.it/310x180&amp;text=FFFFFFF"> 
      </div> 
     </div> 

     <div class="item"> 
      <div class="col-md-4 col-sm-6"> 
       <img alt="" src="http://placehold.it/290x140&amp;text=GGGGGGGG"> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-xs"> 
       <img alt="" src="http://placehold.it/350x300&amp;text=HHHHHHHHH"> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> 
       <img alt="" src="http://placehold.it/200x120&amp;text=IIIIIIIIII"> 
      </div> 
     </div> 

     <div class="item"> 
      <div class="col-md-4 col-sm-6"> 
       <img alt="" src="http://placehold.it/350x50&amp;text=JJJJJJJJJ"> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-xs"> 
       <img alt="" src="http://placehold.it/270x170&amp;text=KKKKKK"> 
      </div> 

      <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> 
       <img alt="" src="http://placehold.it/250x155&amp;text=LLLLLLLL"> 
      </div> 
     </div> 
    </div><!-- Controls --> 
<a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" data-slide="next" href="#carousel-example-generic"><span class="glyphicon glyphicon-chevron-right"></span></a> 
    <br> 
</div></div> 

这里我的CSS：

.carousel-home { 
margin-left:39px; 
margin-right:39px; 
} 

.carousel-indicators li { visibility: hidden; } 

.carousel-inner .item { 
font-size:10px; 
color:#0404B4 
} 

.carousel-control { 
position:absolute; 
top: 50%; 
width: 30px; 
font-family: 'Helvetica Neue', Arial, sans-serif; 
} 
.carousel-control.left, 
.carousel-control.right { 
background:#000000; 
} 

.carousel-control.left { left: -2px; } 
.carousel-control.right { right: -2px; }` 

Answer 1

告诉我，如果这个工程和i'll帮助你！

   <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/350x145&amp;text=BBBBBB"> 
       </div> 

       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/225x300&amp;text=CCCCCCC"> 
       </div> 
      </div> 

      <div class="item"> 
       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/250x250&amp;text=DDDDDDD"> 
       </div> 

       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/250x150&amp;text=EEEEEEEE"> 
       </div> 

       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/310x180&amp;text=FFFFFFF"> 
       </div> 
      </div> 

      <div class="item"> 
       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/290x140&amp;text=GGGGGGGG"> 
       </div> 

       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/350x300&amp;text=HHHHHHHHH"> 
       </div> 

       <div class="col-md-4 col-sm-6 hidden-sm hidden-xs"> 
        <img class="img-responsive" alt="" src="http://placehold.it/200x120&amp;text=IIIIIIIIII"> 
       </div> 
      </div> 

      <div class="item"> 
       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/350x50&amp;text=JJJJJJJJJ"> 
       </div> 

       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/270x170&amp;text=KKKKKK"> 
       </div> 

       <div class="col-md-4 col-sm-4 col-xs-4"> 
        <img class="img-responsive" alt="" src="http://placehold.it/250x155&amp;text=LLLLLLLL"> 
       </div> 
      </div> 

如果你想为你只HEVE正确使用媒体查询这样的设备不同尺寸

：

/*pc´s and big screens */ 
@media (min-width: 1200px) { 
} 

/* Tablets an medium desktops */ 
@media (min-width: 992px) and (max-width: 1199px) { 
} 
/* Tablets portrait and small desktops*/ 
@media (min-width: 768px) and (max-width: 991px) { 
} 
/* landscape phones and portrait tablets */ 
@media (max-width: 767px) { 
} 
/* landscape phones and small devices */ 
@media (max-width: 480px) { 
} 

，并添加每个设备的具体宽度和高度。 你是说这个还是你想要另一件事？