如何阻止轮播幻灯片在移动视图中太小？

Question

当浏览器窗口很小或在移动视图中时，我的轮播幻灯片似乎太小了。

这是我的问题的 codepen 链接 - http://codepen.io/anon/pen/zBLWZb

<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->

        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://www.artsfon.com/pic/201503/2560x1440/artsfon.com-61078.jpg" alt="First Slide">
                <div class="carousel-caption">
                  <h2 class="slider-title" style="color:#DAA520;" data-animation="wow animated bounceInDown">Mann's Solutions</h2>
              <p class="slide-description">Immigration Law Firm</p>
               <div id="arrowtoaboutus" class="arrow bounce">&nbsp;</div>
                </div>
            </div>

        </div>
        <!-- Carousel controls -->
    </div>
</div> 

这是我的CSS。如您所见，我尝试在移动视图中将幻灯片设置为 500 像素。

 .carousel-caption {
    top: 40%;
    bottom: auto;
    padding-bottom: 500px;
    /*padding-top: 250px;*/
}



@media (min-width:768px) { 
    .carousel .carousel-inner .item {
        min-height: 500px;
    }
}

解决方案

我必须添加以下 CSS：

.img-carousel { min-width: 800px;}

@media (max-width: 768px) { 
    .carousel .carousel-inner .item {
        height: 500px;
    }
}

Answer 1

为您的图像添加一个类，例如class="img-carousel"

HTML：

<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->

        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img class="img-carousel" src="http://www.artsfon.com/pic/201503/2560x1440/artsfon.com-61078.jpg" alt="First Slide">
                <div class="carousel-caption">
                  <h2 class="slider-title" style="color:#DAA520;" data-animation="wow animated bounceInDown">Mann's Solutions</h2>
              <p class="slide-description">Immigration Law Firm</p>
               <div id="arrowtoaboutus" class="arrow bounce">&nbsp;</div>
                </div>
            </div>

        </div>
        <!-- Carousel controls -->
    </div>
</div>

CSS：

.carousel-caption {
    top: 40%;
    bottom: auto;
    padding-bottom: 500px;
    /*padding-top: 250px;*/
}

    .img-carousel { min-width: 800px;}

@media (max-width: 768px) { 
    .carousel .carousel-inner .item {
        min-height: 500px;
    }
}

如果您不希望在缩小屏幕时调整图像大小，请使用此代码：

.img-carousel { min-width: 800px;}

轮播的最小尺寸：

    @media (max-width: 768px) { 
        .carousel .carousel-inner .item {min-height: 500px;}
}

Codepen 上的演示：http://codepen.io/infuzzione/pen/VjBxbP