javascript - 是否有垂直响应画廊插件？ Jquery 还是 Javascript？

Question

任何人都可以指出水平和垂直响应画廊 slider 插件或 Jscript 的方向吗？

我试过 Flexslider1/2、Galleria 和其他各种插件，但它们都是固定宽度的，而且似乎对垂直调整浏览器大小没有反应？我尝试更改所有 CSS，但没有成功。

如有任何帮助，我们将不胜感激。

示例(使用 Flexslider):如果您水平调整浏览器的大小，图像将自动调整大小以适应浏览器窗口。如果您垂直调整大小，则会垂直 chop 图像。

目标:当您垂直调整浏览器窗口大小时，图像将更改宽度和高度以保持比例并适合浏览器窗口。与水平相同。

希望我已经解释清楚了。如果您需要澄清，请询问而不是投反对票。

Answer 1

查看 Flexslider 中的代码我找不到任何特别排除在垂直窗口更改时调整图像大小的可能性的内容。图像调整大小似乎纯粹基于 CSS，然后将宽度/高度信息提供给 javascript。看来您遇到了浏览器的 DOM/CSS 问题，无法在垂直窗口更改时调整图像大小，然后其中有一点不是经过测试的 FlexSlider 设置。

要让所有浏览器理解没有垂直滚动的 100% 垂直布局总是有点挑剔，因为这不是正常的布局范例。随后的 CSS 版本有所帮助，但浏览器的 react 方式和 100% 解释您的意思之间仍然存在很大差异。

我拿了slider demo并借了大部分 stack answer管理 100% 垂直布局和 ended up with this详情如下。

首先，更改图像 CSS 属性以缩放布局的高度并设置宽度自动以保持正确的纵横比:

 width: auto;
 height: 90%;

这本身适用于图像，但 FlexSlider javascript 将一些额外的元素添加到页面中，并且还在演示中为水平布局默认了一些 CSS 宽度值。

.flexslider .slides img {width: 100%; display: block;}

成为

.flexslider .slides { width: 100%; display: block;}
.img {display: block; }

现在您可以在 Chrome 中播放幻灯片了。

Firefox 不会将图像 100% 高度应用于包含类似 Chrome 的元素，因此我不得不退回所有元素并在 CSS 中应用 100% 高度规则

.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }

.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}

您会看到我也在那里制作了 img。你最终得到 the page .

此解决方案的一个缺点是您现在有一个图像，其大小将调整到超过屏幕的水平尺寸。您可能需要构建一些东西来满足这一点，因为如果您使用依赖于工作宽度的基本轮播，您将遇到问题。当您将鼠标移出屏幕并添加水平滚动条时，也会发生一些奇怪的事情，但我会为您留下那个。也请自行承担尝试 IE 的风险。

...这就是我回避前端开发的原因 =)

很抱歉，该帖子最终变成了对我闲逛的评论。