1

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

我的目标是让滑块中的图像始终位于页脚页眉的中心，尽管图像的高度。有没有一种简单的方法可以在页脚和页眉之间制作某种类型的动态容器来完成这个，或者可能是一些漂亮的 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，我当然会从顶部使用更好的解决方案将其删除，但我想实现死点图像一直被查看。

提前致谢

4

1 回答 1

0 

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

于 2015-09-15T05:31:45.960 回答