在Bootstrap-3轮播中自动调整图像大小

Question

我有一个Bootstrap-3旋转木马，每次显示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

告诉我这是否有效，我会帮你的！

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

如果您希望所有设备的大小都不同，则只需正确使用媒体查询，如下所示：

/*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) {
}

并为每个设备添加特定的宽度和高度。你是说这个还是你想要别的东西？