有图像中心的宽度和高度使用猫头鹰旋转木马和Bootstrap 3

Have images center the width and height using owl carousel and Bootstrap 3

本文关键字：猫头鹰 旋转木马 Bootstrap 高度 图像      更新时间：2023-09-26

我正在尝试使用bootstrap和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的顶部，我当然会从顶部删除一个更好的解决方案，但我想实现死心图像所有的时间，当他们被查看。

Thanks in advance

.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>

相关文章：