Question

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

Horzontal以css为中心，但我不得不使用JavaScript进行垂直居中。

我的问题是：

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

Answer 1

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

https://github.com/ocbnet/layout

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

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

Answer 2

嗯......那些很棘手。我发现如何做到这一点的最好方法是将你的内容实际放在单个单元格表中，并将vertical-和horizontal-align属性设置为......中间和中心我认为？但无论如何，它可以做到。我会玩弄它，看看我能不能一起得到一个例子。

编辑：

好的，我建议的第一件事就是让浏览器按比例调整大小。您不需要调整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

是（对于100％高度部分）：html,body,div {height:100%}
溢出：隐藏对我来说很好看。其他可能的方案：
1. <script>document.write('<img src="..." width="'+window.width()+'" [...] />（但应避免使用document.write）
2. <img src="" width="1" height="1" />（即，定义较小的默认尺寸 - >无滚动条）
3. @Gerben建议：css max-width（最好）
似乎是水平滚动条所需的空间。我也只能以特定的尺寸+比例来解决这个问题。
这是pictureRatio等于或非常接近fullDivRatio的时候。我无法找到溢出的东西：隐藏。
不知道，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。如果你不想在你的结构中使用表格，那么约瑟夫回答使用表格的替代方法。

在尝试将图像适合屏幕而不扭曲时调整大小时滚动条的问题

4 个答案: