使用 owl carousel 和 Bootstrap 3 让图像的宽度和高度居中答案

【问题标题】：Have images center the width and height using owl carousel and Bootstrap 3使用 owl carousel 和 Bootstrap 3 让图像的宽度和高度居中
【发布时间】：2014-07-14 22:14:36
【问题描述】：

我正在尝试结合使用引导程序和 owl carousel 来实现响应式图片库浏览体验。我有一个固定高度的固定页眉和一个固定高度的固定页脚。

我的目标是让滑块中的图像始终位于页脚页眉的中心，尽管图像的高度。有没有一种简单的方法可以在页脚和页眉之间制作某种类型的动态容器来完成这个，或者可能是一些漂亮的 java 脚本来调整图像的大小？（请记住，该解决方案也需要在移动设备上运行）

这是我的 jsfiddle 示例 http://jsfiddle.net/Tenacity/GMu2x/

我的脑子里在想类似的事情

.img .owl-carousel {
 width:xx%;
 height:xx%;
 margin-top:xx%;
 margin-bottom:xx%;
 margin-left:xx%;
 margin-right:xx%;
 }

我认为 xx 是根据屏幕高度和宽度动态计算的

如果您查看我的示例，我目前只是使用 margin-top css 属性让图像从顶部从左到右滚动大约 60px，我当然会从顶部使用更好的解决方案将其删除，但我想要以在查看它们时始终实现死点图像。

提前致谢

【问题讨论】：

标签： javascript jquery responsive-design twitter-bootstrap-3 owl-carousel

【解决方案1】：

.owl-carousel .owl-item{
    height:550px;
    width:1200px;
}
.owl-carousel .owl-item img {
    height:550px;
    width:auto;
}
.bg-holder{
    text-align: center;
}

<div class="owl-carousel owl-slider" id="owl-carousel-slider" data-inner-pagination="true" data-white-pagination="true">
<div class="bg-holder">
 <!-- your content images goes here -->
</div>
</div>

【讨论】：