javascript - 尝试在不扭曲的情况下使图像适合屏幕时调整大小的滚动条问题

我正在尝试制作全屏幻灯片效果 jsFiddle code here ，但我对如何去做有疑问。从我的示例 fiddle 可以看出，我希望图片尽可能大而不扭曲(适合屏幕)。我还希望它垂直和水平居中。

水平居中由 css 处理，但我不得不使用 JavaScript 进行垂直居中。

我的问题是:

有没有更好的方法来完成这些(例如全部在 CSS 中)？
在第一次加载时，如果图片(在缩放之前)比视口(viewport)宽，则在我的脚本计算视口(viewport)高度时会出现一个滚动条。这意味着当我的脚本将 div 和 img 适合窗口时，底部有一个白色间隙，即滚动条的高度。我可以通过指定 overflow:hidden 来解决这个问题，但这似乎有点变通。有没有更好的办法？切换图像会更好吗？
当我调整大小时使 div 比图像宽时，我在黑色 div 下得到一个白色部分，它创建了一个垂直滚动条。同样，我可以通过 overflow:hidden 摆脱它，但我不喜欢这种方法。我想知道为什么它在那里以及如何摆脱它？
有时我可以让水平滚动条出现，当我调整它的大小时它会闪烁。 overflow:hidden 解决了这个问题，但我想要一个更简洁的解决方案。
是否有更好的编码方式，或者我的 jQuery/Javascript 是否可以进一步优化？

最佳答案

我不知道有任何纯 html/css 的跨浏览器解决方案可以完成您的要求。当浏览器决定显示/隐藏滚动条时，任何具有宽高比和流动宽度的元素都会触发“竞争条件”。当浏览器在其控制下的元素检测到这种情况时，将强制使用滚动条。这也可以用javascript模拟。我也遇到了这个问题，创建了一个小库:

还有一个演示实现了 OP 的要求:

关于javascript - 尝试在不扭曲的情况下使图像适合屏幕时调整大小的滚动条问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6818096/