是否有垂直响应的图库插件？Jquery还是Javascript？

有人能告诉我水平和垂直响应的图库滑块插件或Jscript的方向吗

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

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

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

目标：垂直调整浏览器窗口的大小时，图像将改变宽度和高度，以保持在浏览器窗口内的比例和适合度。水平的也一样

---

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

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

让所有浏览器在没有垂直滚动的情况下理解100%垂直布局总是有点挑剔，因为这不是正常的布局范例。后续的CSS版本有所帮助，但浏览器的反应方式和解释100%的含义之间仍然存在很大差异

我拿了一本书，借用了大部分的a来管理100%的垂直布局和下面的细节

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

 width: auto;
 height: 90%;

这可以单独在图像上工作，但是FlexSliderJavaScript在页面中添加了一些额外的元素，并且在演示中为水平布局默认了一些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。而你最终得到的是

这个解决方案的一个缺点是，你现在有一个图像，它的大小将超过屏幕的水平大小。您可能需要构建一些东西来满足这一点，因为如果您使用依赖于工作宽度的基本旋转木马，您将遇到问题。当你将鼠标移出屏幕添加一个水平滚动条时，也会发生一些奇怪的事情，但我会把这个留给你。也可以尝试IE，风险自负

…这就是为什么我回避前端开发=）

---

很抱歉，这篇文章最后有点像是对我闲逛的评论。

我还想要一个垂直响应（和水平响应）的图像滑块。在没有从盒子里找到任何我想要的东西后，我开始坐立不安

给你

以下是关键元素（请转到JSFIDLE获取完整演示）。这不是很完美，但应该足以让你开始

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>

---

特别感谢这一轻量级jQuery旋转器。

您的意思是当您拖动窗口使其更高时，屏幕上会加载更多图像，而当图像更短时，它们会从显示中消失吗？所以你不会看到窗口的滚动条。@记住我刚刚更新的Monkey，让它更清晰一点。希望这能帮上忙。我想我现在就明白了，所以需要一组（x，y）数量的图像来填充屏幕。我没有办法解决你的问题。如果Flexslider已经为X做了这项工作，尽管他们已经完成了大部分的腿部工作，并且应该是一个可扩展的功能，可以在功能中添加Y，而不会有太多麻烦。您必须为基于Y的X和基于X的Y添加一个额外的大小限制，这样您就不会得到超出纵横比的图像。谢谢您的帮助。这肯定会让我走上正确的方向。我真的很感谢你抽出时间来帮助我。

#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%;
  }
}