具有固定纵横比的居中图像的 Flexslider 幻灯片 div

Question

我正在使用一个使用 flexheader 显示横幅图像的主题。因为它是一个主题，我不能直接修改幻灯片的选项，我正在尝试解决它。​​

我想要的是横幅的高度保持不变。 16:9 图片使用整个横幅 space，但纵横比较低的图片以纯色背景居中。

所以我试图传递一个特殊样式的 div 作为列表项（幻灯片）：我创建 16:9 div 和纯灰色背景。

Here 是一个示例，它大部分都有效，但带有徽标的幻灯片被拉伸了。如何保持图像纵横比并使图像保持水平居中？还是有更简单的方法来实现我想要的？

Answer 1

要实现您想要的效果，您需要从图像元素中删除 height: 100% !important，因为那段代码正在拉伸它。

.flexslider .slides img {
  width: auto;
}

但是图像不会填满整个滑块区域，因为两侧会有间隙，但不会被拉伸。要使图像填满整张幻灯片，您需要以正确的尺寸上传图像。希望你明白我的意思。