尝试使图像适合屏幕而不扭曲时，调整大小时滚动条出现问题

Question

我正在尝试制作全屏幻灯片效果jsFiddle 代码，但我有疑问至于如何做。从我的示例小提琴中可以看出，我希望图片尽可能大而不扭曲（适合屏幕）。我还希望它垂直和水平居中。

水平居中是在 css 中处理的，但我必须使用 JavaScript 来实现垂直居中。

我的问题是：

1. 有没有更好的方法来做到这一点（例如全部在 CSS 中）？
2. 第一次加载时，如果图片（在缩放之前）比视口宽，则在我的脚本计算视口高度时会出现滚动条。这意味着当我的脚本将 div 和 img 适合窗口时，底部有一个白色间隙，即滚动条的高度。我可以通过指定溢出来解决这个问题：隐藏，但这似乎是一个解决方法。有更好的办法吗？切换图像会更好吗？
3. 当我调整大小以使 div 比图像宽时，我会在黑色 div 下看到一个白色部分，这会创建一个垂直滚动条。我可以再次使用溢出：隐藏来摆脱这个问题，但我不喜欢这种方法。我想知道它为什么存在以及如何摆脱它？
4. 有时我可以使水平滚动条出现，并且当我调整大小时它会闪烁开/关。 Overflow:hidden 解决了这个问题，但我想要一个更干净的解决方案。
5. 有没有更好的编码方法，或者我的 jQuery/Javascript 可以进一步优化吗？

Answer 1

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

https://github.com/ocbnet/layout

那里也是一个实现OP要求的演示：

http://www.ocbnet.ch/github/layout/demo/fullscreen.html

Answer 2

嗯……这很棘手。我发现执行此操作的最佳方法是将您的内容实际放入单个单元格表格中，并将垂直和水平对齐属性设置为......我认为是中间和中心？但无论如何，这是可以做到的。我会尝试一下，看看是否可以一起举一个例子。

编辑：

好的，我建议的第一件事是让浏览器按比例调整大小。您不需要调整 div 的大小，只需调整图像的大小即可。您也可以让浏览器计算出垂直对齐方式，这是比计算垂直对齐方式更好的选择。这可以通过将内容放置在单个单元格表格中来完成。下面的示例代码是纯 html 和 css。您可以添加一些内容，以达到基于图像高度与窗口高度在 100% 自动和自动 100% 之间切换图像高度和宽度的效果。希望这能让您更接近您的目标。

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>

Answer 3

1. 是的（对于 100% 高度部分）： html,body,div {height:100%}
2. Overflow:hidden 对我来说似乎不错。其他可能的解决方案：
3. 似乎是水平滚动条所占用的空间，我也只在特定的尺寸+比例下遇到这个问题，
4. 这是当 pictureRatio 等于或非常接近 fullDivRatio 时我找不到。 ，调整大小
5. 不知道，在我看来

时出现奇怪的滚动条是由于边框效应，当您从 if 切换到时，滚动条就会出现。 else 或反之亦然。

使用 这个 jsFiddle 我永远不会得到水平滚动条，但我仍然时不时地得到垂直的。

Answer 4

您可以这样做：

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

都是纯 HTML 和 CSS。如果您不想在结构中使用表格，则可以使用约瑟夫的答案的替代方案。