html - 如何阻止 Bootstrap 的响应式轮播图像在小屏幕/窗口中变得太小？

Question

我正在使用 bootstrap 制作一个网站。我在主页上有轮播图片，但是当我将浏览器窗口调小或在智能手机中打开它时，轮播图片变得太小而且看起来很奇怪。

我的意思是: http://www.bootply.com/BmzEiDLmC4

我想要一个效果，当浏览器窗口较小时，图像高度可以保持不变并且图像在左右两侧被裁剪。像这样:

http://www.fuseproject.com/

我曾尝试在 Goolge 和 Stakoverflow 上找到它，但似乎找不到解决方案。

这可能是一个简单的问题 - 但由于我在网络开发方面的知识有限，我无法找到解决方案。如果有人能提供帮助，我将不胜感激。

谢谢!

Answer 1

演示:https://jsbin.com/lefizo/1/

在固定高度的 .item 上使用背景图片并根据需要调整媒体查询。

CSS:

#my-carousel .carousel-inner .item {
    width: 100%;
    height: 300px;
}
#my-carousel .carousel-inner .item {
    background-image: url(http://dummyimage.com/1500x500/333/999.png);
    background-size: cover;
    background-position: center top;
}
#my-carousel .carousel-inner .item-2 {
    background-image: url(http://dummyimage.com/1500x500/555/999.png)
}
#my-carousel .carousel-inner .item-3 {
    background-image: url(http://dummyimage.com/1500x500/777/999.png)
}
@media (min-width:768px) { 
    #my-carousel .carousel-inner .item {
        height: 500px
    }
}

HTML:

<!-- carousel start -->

<div class="containter">

      <div class="carousel carousel-fade slide" id="my-carousel">

        <ol class="carousel-indicators">
            <li data-target="#my-carousel" data-slide-to="0"></li>
            <li data-target="#my-carousel" data-slide-to="1"></li>
            <li data-target="#my-carousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner">
          <div class="item active item-1">
             <a href="#"></a>
       </div>
          <div class="item item-2" >
             <a href="#"></a>
       </div>
          <div class="item item-3">
             <a href="#"></a>
       </div>
        </div>
        <!--  remove the a href tag to remove link that does not need it -->

        <a href="#my-carousel" class="carousel-control left" data-slide="prev"><!-- <span class="glyphicon glyphicon-chevron-left"></span> --></a>
        <a href="#my-carousel" class="carousel-control right" data-slide="next"><!-- <span class="glyphicon glyphicon-chevron-right"></span> --></a>
            
    </div>

</div>
<!-- carousel end -->