Question

我在这里找到了很多关于这个主题的答案。

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

我的主页上有一个全宽旋转木马。它很棒。它可以调整任何浏览器宽度。我想要什么; - 旋转木马的作用是留在我指定的高度。 - 使图像保持居中。 - 对于要响应的轮播宽度，但要使图像/幻灯片向左和向右裁剪。

我发现的很多解决方案都建议以css背景显示图像。但我知道我需要的是使用这个选项。

我花了很多时间尝试尝试让它发挥作用。超过几天！任何帮助将不胜感激。通过在各种网站上搜索，似乎其他人会对这个主题有所帮助。

如果您希望我发布更多详情，请与我们联系。

Answer 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;
}

如何创建一个具有固定高度的响应式bootstrap v3轮播，可以左右裁剪图像？

1 个答案: