【问题标题】：How to stop Bootstrap's responsive carousel images becoming too small in small screen/windows?如何阻止 Bootstrap 的响应式轮播图像在小屏幕/窗口中变得太小？
【发布时间】：2015-02-15 06:21:55
【问题描述】：

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

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

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

http://www.fuseproject.com/

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

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

谢谢！

【问题讨论】：

标签： html twitter-bootstrap responsive-design

【解决方案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 -->

【讨论】：

非常感谢克里斯蒂娜！这就是我要找的效果。
这是不用大惊小怪的方法，你可以使用我猜想的脚本或做一些固定位置和大量数学运算。您必须了解 CSS 和 html 才能知道，如果您将真实图像粘贴在那里，图像的边缘会将其自身推向视口的边缘，并且它会缩小并变得太小，或者您会得到滚动条，或者如果您隐藏滚动条除非您想在各种断点处弄乱左侧位置，否则它仍然没有居中。您可以将 css 放在同一个文件或另一个文件中的其他 css 之后。
http 请求越少越好。将您的 css 文件保持在最低限度，使用一个 CSS 文件，将所有 CSS 放入其中，使用媒体查询或服务器端技术将较小的图像传送到较小的设备。查找服务器端的adaptive-images.php。在谷歌中查找移动优先背景图片以了解这一点。
如果您这样做，将阻止缓存。 matthewjamestaylor.com/blog/… - 更多问题需要是新的 SO 问题。
问题是关于图像变小，已回答。解决整个问题将被分成其他问题，表明您所做的努力。您如何在项目中设置链接是未知的。如果链接是整个幻灯片，则将链接位置设为绝对，所有方向为 0 并显示块。如果它没有滑动，请检查您的设置是否正确，阅读有关数据间隔的说明或如何在 jQuery 中进行设置。 getbootstrap.com/javascript/#carousel