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

Question

我正在尝试制作全屏幻灯片效果jsFiddle code here，但我对如何做到这一点有疑问。从我的示例小提琴中可以看出，我希望图片尽可能大而不失真（适合屏幕）。我还希望它垂直和水平居中。

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

我的问题是：

1. 有没有更好的方法来做到这一点（例如全部在 CSS 中）？
2. 首次加载时，如果图片（在缩放之前）比视口宽，则在我的脚本计算视口高度时会出现滚动条。这意味着当我的脚本将 div 和 img 适配到窗口时，底部有一个白色的间隙，即滚动条的高度。我可以通过指定溢出来解决这个问题：隐藏，但这似乎有点解决方法。有没有更好的办法？切换图像会更好吗？
3. 当我调整 div 的大小以使 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。您可以添加一些效果，即您已经必须根据 img 高度与窗口高度在 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 对我来说似乎不错。其他可能的解决方案：
   1. <script>document.write('<img src="..." width="'+window.width()+'" [...] />（但是应该避免 document.write）
   2. <img src="" width="1" height="1" />（即定义一个小的默认尺寸 -> 没有滚动条）
   3. @Gerben 建议：css 最大宽度（最佳）
3. 似乎是水平滚动条占用的空间。我也只会在特定的尺寸+比例下遇到这个问题。
4. 这是当pictureRatio 等于或非常接近fullDivRatio 时。我找不到带有溢出的 hoo:hidden。
5. 不知道，IMO 似乎足够好。

是的，调整大小时出现奇怪的滚动条是因为边框效果，当您从if 切换到else 时会出现滚动条，反之亦然。

使用this 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。如果您不想在结构中使用表格，则可以替代约瑟夫使用表格的答案。