图像轮播中的项目对齐

Posted 2023-05-09

【中文标题】图像轮播中的项目对齐

【英文标题】：Item alignment within an image carousel

【发布时间】：2014-03-25 13:05:08

【问题描述】：

我正在使用Owl Carousel responsive slider，并试图弄清楚如何在主容器中定位图像和标题元素。我设置了一个测试页面here，并附上了一个样机指南。理想情况下，我想为容器元素设置最大/最小高度，将<p> 标题固定在容器的左下方，并将图像垂直对齐到滑块的中间。

这可以通过基本 CSS 实现吗？感谢您在此处提供任何指导。

【参考方案1】：

将此添加到您的 css 文件中：

div.owl-item > div 
display:table-cell;
vertical-align:middle;

并将其添加到您的 JS 文件（或在 head 标签之间）以获得动态 w/h：

$(window).load(function() 

var maxH = 0;
var maxW = 0;
$('img','div.owl-item > div').each(function(f) 
if ($(this).height() > maxH)  maxH = $(this).height() ;
if ($(this).width() > maxW)  maxW = $(this).width() ;
);
$('div.owl-item > div')
.height(maxH)
.width(maxW);


);

【讨论】：

非常好用，谢谢——但是唯一的问题是我不想指定静态高度，因为页面是响应式的；有没有办法修改 JS 中的定位以考虑动态宽度/高度？

在这里我编辑了我的答案。如果您觉得可以，请接受作为答案。

这很有帮助——谢谢。不过，我仍然对不同方向的图像有疑问。我已经更新了上面的链接，您将在第四张幻灯片中看到，我有一个垂直方向的图像将整个滑块向下推，因为将其宽度拉伸到 100% 会迫使其高度扩大。我想知道如何同时适合高和宽的图像，并让它们在固定纵横比容器中水平和垂直对齐，如果这有意义的话......

我认为这是因为代码在图像加载之前执行。要纠正这个问题，只需将“$(document).ready”更改为“$(window).load”我已经更新了我的答案，我认为这应该符合你的预期。

【参考方案2】：

如果您想要响应式图像的动态高度，请使用 jquery 设置它的高度。

演示http://jsfiddle.net/nLJ79/

note: 调整结果框大小后，再次点击“运行”按钮。

JQUERY

$(document).ready(function () 
    $("#owl").owlCarousel(
        navigation: true,
        singleItem: true
    );
    $('.owl-pagination .owl-page, .owl-buttons div').on('click',function()
        $('.owl-item div').css('height',$('.owl-item div').css('height'));
    );
);