如何创建具有固定高度的响应式引导 v3 轮播以左右裁剪图像？答案

【问题标题】：How do I create a responsive boostrap v3 carousel with fixed height that crops the image left and right?如何创建具有固定高度的响应式引导 v3 轮播以左右裁剪图像？
【发布时间】：2014-01-14 19:17:09
【问题描述】：

我已经尝试了很多关于这个主题的答案。

我正在使用引导 v3 轮播。我正在使用默认的 html 和 css。（html取自twitter bootstrap提供的轮播示例模板）

我的主页上有一个全宽轮播。它工作得很好。它可以根据需要调整任何浏览器宽度。我想要什么； - 对于旋转木马来说，就是停留在我指定的高度。 - 使图像保持居中。 - 让轮播的宽度具有响应性，但图像/幻灯片可以左右裁剪。

我发现的许多解决方案都建议将图像显示为 CSS 背景。但我知道如果不使用此选项，我需要的东西是可能的。

我花了很多时间来尝试让它发挥作用。不止几天！任何帮助将不胜感激。通过在各种网站上进行搜索，其他人似乎会感谢有关此主题的一些帮助。

如果您希望我发布更多详细信息，请告诉我。

【问题讨论】：

请将此作为答案发布..

标签： css twitter-bootstrap responsive-design slider carousel

【解决方案1】：

这是我开始工作的代码 :)

所以经过多次试验后，我得到了我上面描述的完全正确的结果。我希望人们发现这个问题并发现它有帮助。如果你不能让它工作，也许我可以帮忙？

这是我使用的代码。（这是来自 twitter boostrap v3 的 css）

.carousel {
position: relative;
height: 685px;
} 
.carousel .item {
  height: 685px;
}

.carousel-inner > .item > img {
    position:absolute;
    right:0;
    left:50%;
    margin-left:-800px; /* Half the width of the image */
    height:685px;
    max-width:none;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
}

【讨论】：