0

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

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

我的问题是：

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

4 回答 4

1

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

https://github.com/ocbnet/layout

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

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

于 2012-07-25T03:43:28.490 回答
0

你可以这样做：

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

于 2011-07-25T18:39:28.670 回答
0

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

编辑：

好的，所以我建议的第一件事是让浏览器按比例调整大小。您不需要调整 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>
于 2011-07-25T15:23:45.037 回答
0
  1. 是（对于 100% 高度部分）：html,body,div {height:100%}
  2. 溢出：隐藏对我来说似乎不错。其他可能的解决方案：
    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：隐藏。
  5. 不知道，似乎足够好IMO。

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

有了这个 jsFiddle，我永远不会得到水平滚动条，但我仍然不时得到垂直滚动条。

于 2011-07-25T16:50:52.567 回答