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

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

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

1 个答案: