Lightbox中的响应式Flexslider

Question

我难以构建响应式flexslider，但设法找到解决方案，并认为我会在这里分享。

我希望有一个适合可用屏幕尺寸的柔性滑板旋转木马，因为它出现在灯箱内，并且旋转木马图像可能具有不同的尺寸和比例，但仍然适合滑块和屏幕。

我最初看到的一些替代解决方案包括：

1. 使所有图像的大小和比例相同

2. 提供图像作为背景图像而不是使用实际图像 图像元素

但我想要一个使用实际图像的解决方案。

Flex滑块的难点在于，当您使用不同尺寸的图像时，作为flex-viewport的密钥容器的高度由最高的图像设置。因此，即使设置了flex-viewport的宽度，高度也将由最高的图像决定。尝试使用百分比将flex-viewport设置为相对高度不起作用，因为它仍然被最高图像的高度覆盖。

可以设置固定高度（以像素为单位），但这显然不会改变，具体取决于所使用的显示器的大小。

Answer 1

解决方案真的不是那么困难，您只需要使用jQuery获取显示的高度，然后根据显示高度将flex-viewport高度以及图像的高度设置为设置的像素高度，例如：

 h = ($(window).height()*0.8);    
 $('.flex-viewport').height(h);
 $('.slides img').height(h);

使图像居中并使它们合适我使用CSS：

img {width: auto; margin: auto;}

以及主要的Flexslider容器：

.flexslider {margin: auto; max-width: 90%;}