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

Question

我正在使用bootstrap创建一个网站。我在主页上有旋转木马图像，但当我将浏览器窗口缩小或在智能手机中打开时，旋转木马图像变得太小而且奇怪。

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

我希望有一个效果，即图像高度可以保持不变，并且当浏览器窗口较小时，图像会左右裁剪。像这样：

http://www.fuseproject.com/

我试过在Goolge以及Stakoverflow上找到它但似乎无法找到解决方案。

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

谢谢！

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

如何阻止Bootstrap的响应式旋转木马图像在小屏幕/窗口中变得太小？

1 个答案:

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