Bootstrap 3.0 Carousel - 不同宽度的图像答案

【问题标题】：Boostrap 3.0 Carousel - different width imagesBootstrap 3.0 Carousel - 不同宽度的图像
【发布时间】：2014-05-01 20:29:53
【问题描述】：

我想使用 Bootstrap 3.0 Carousel 在我的网页上显示图像滑块。页面在这里：http://wasup.si/test-bid1

我的问题是我的图像宽度不同，但高度相同。我想要的是图像粘在一起。基本上，项目类的宽度应该与图像的宽度相同。有谁知道我该怎么做？

完整的轮播宽度仍应为页面的 100%，只是显示的项目多于一个。

【问题讨论】：

我建议要么简单地将当前图像居中并在它们后面放置背景颜色，要么尝试获取足够大以拉伸全屏的图像。任何轮播/画廊都可以更好地处理大小相同的图像。
感谢您的想法，但我无法控制源图像（用户上传）

标签： jquery twitter-bootstrap dynamic carousel

【解决方案1】：

使用它的最佳方式是其他轮播

http://owlgraphic.com/owlcarousel/demos/images.html

<div id="owl-demo">

  <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
  <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
  <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
  <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
  <div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
  <div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
  <div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
  <div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>

</div>

【讨论】：