固定长宽比div的居中Flexslider幻灯片

Question

我正在使用采用flexheader来显示横幅图像的主题。 由于这是一个主题，因此我无法真正直接修改幻灯片的选项，而是尝试解决该问题。

我想要的是横幅的高度保持不变。 16：9图像使用整个横幅空间，但较低的纵横比图像以纯色背景颜色为中心。

因此，我尝试将样式特别特殊的div作为列表项（幻灯片）传递：我创建了16：9 div和纯灰色背景。

这是一个示例，大多数情况下有效，但是带有徽标的幻灯片被拉伸了。 如何保持图像的纵横比并将图像保持在水平中心？ 还是有一种更轻松的方法来实现我想要的？

Answer 1

要实现所需的功能，您需要删除height: 100% !important image元素的height: 100% !important ，因为那段代码正在拉伸它。

.flexslider .slides img {
  width: auto;
}

但是图像不会充满整个滑块区域，因为在两侧都会有间隙，但是不会被拉伸。 为了使图像充满整个幻灯片，您需要以正确的大小上传图像。 希望你理解我的意思。