有垂直响应画廊插件吗？ jQuery 还是 JavaScript？

Question

谁能告诉我水平和垂直响应的画廊滑块插件或 Jscript 的方向？

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

任何帮助将不胜感激。

示例（使用 Flexslider）：如果您水平调整浏览器大小，图像将自动调整大小以适应浏览器窗口。如果您垂直调整大小，这将垂直切断图像。

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

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

Answer 1

我还想要一个垂直响应（和水平）的图像滑块。在没有找到任何可以按照我想要的方式工作的开箱即用的东西之后，我开始摆弄。

这里是the result。

这里是关键元素（转到 jsFiddle 以获得完整的演示）。它不是很完美，但应该足以让您入门。

HTML

<div id="fader">
    <a href="http://url1.com"><img src="http://placehold.it/600x600&text=Slide1" ></a>
    <a href="http://url2.com"><img src="http://placehold.it/600x600&text=Slide2" ></a>
    <a href="http://url3.com"><img src="http://placehold.it/600x600&text=Slide3" ></a>
    <a href="http://url4.com"><img src="http://placehold.it/600x600&text=Slide4" ></a>
</div>

CSS

#fader {
    position: relative; 
    width: auto;
    height: 100%;
}

#fader a {
    display:block;
    width:auto;
    height:100%;    
}

@media screen and (orientation: portrait) {
  img { 
      width: 100%; 
      height:auto !important;
  }
}
@media screen and (orientation: landscape) {
  img { 
      height: 100%;
      min-width:10%;
      max-width:100%;
  }
}

特别感谢jsFiddle 提供轻量级 jQuery 旋转器。

Answer 2

浏览Flexslider 中的代码，我找不到任何具体的内容，除了在垂直窗口更改时调整图像大小的可能性。图像大小调整似乎完全基于 CSS，然后将宽度/高度信息输入 javascript。看来您遇到了浏览器的 DOM/CSS 问题，没有在垂直窗口更改时调整图像大小，然后有点这不是经过测试的 FlexSlider 设置。

让所有浏览器都理解没有垂直滚动的 100% 垂直布局总是有点挑剔，因为这不是正常的布局范例。后续的 CSS 版本有所帮助，但浏览器的反应方式和 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。

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

很抱歉，那篇文章最后变成了我在嘲讽的评论。