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

StackOverflow https://stackoverflow.com/questions/6818096

题

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

horzontal将其居中在CSS中得到照顾，但我不得不使用JavaScript进行垂直居中。

我的问题是：

  1. 有没有更好的方法来执行任何操作（例如全部在CSS中）？
  2. 在第一次加载时，如果图片（在缩放之前）比视口宽，则在我的脚本计算视口的高度时，存在滚动条。这意味着，当我的脚本将DIV和IMG拟合到窗口时，底部有一个白色间隙，即滚动条的高度。我可以通过指定溢出来解决这个问题：隐藏，但这似乎有些工作。有没有更好的办法？切换图像会更好吗？
  3. 当我调整大小以使DIV比图像宽时，我在黑色Div下得到一个白色部分，该截面会产生垂直的滚动条。同样，我可以通过溢出：隐藏，但我不喜欢这种方法。我想知道为什么它在那里以及如何摆脱它？
  4. 有时，我可以使水平滚动栏出现，并且在调整大小时会闪烁/关闭。溢出：隐藏解决此问题，但我想要一个更干净的解决方案。
  5. 是否有更好的编码方法，或者可以进一步优化我的jQuery/javascript？
有帮助吗？

解决方案

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

编辑：

好的，我建议的第一件事是让浏览器按比例调整内容。您不需要调整DIV的大小，只是图像。您也可以让浏览器找出垂直对齐，这比计算它是更好的选择。这可以通过将内容放在单个单元表中来完成。下面的示例代码为纯HTML和CSS。您可以根据IMG高度与窗口高度将图像高度和宽度100％切换到100％自动和Auto之间的效果中添加一些东西。希望这能使您更接近您的目标。

<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>

其他提示

我不知道纯HTML/CSS中是否有任何CrossBrowser解决方案来完成您的要求。当浏览器决定显示 /隐藏滚动条时，任何具有纵横比和流体宽度的元素都会触发“种族条件”。当浏览器在控制元素的控制下检测到这种情况时，浏览器将迫使滚动条。这也可以使用JavaScript模拟。我还遇到了这个问题，并创建了一个小库：

https://github.com/ocbnet/layout

还有一个演示可以实现OP要求的内容：

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

  1. 是（对于100％高度部分）： html,body,div {height:100%}
  2. 溢出：隐藏对我来说似乎不错。其他可能的解决方案：
    1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> （但是，应避免写入）
    2. <img src="" width="1" height="1" /> （即，定义一个小默认尺寸 - >否滚动条）
    3. @Gerben建议：CSS Max Width（最佳）
  3. 似乎是水平滚动条将占用的空间。我也只以特定的大小+比率来解决这个问题。
  4. 这是pictureratio相等或非常接近fulldivratio的时候。我找不到溢出的hoo：隐藏。
  5. 不知道，看起来足够好。

是的，由于边界效应，在调整大小的怪异滚动栏上发生了 if 到 else 或相反亦然。

和 这个JSFIDDLE 我从来没有得到水平的卷轴，但我仍然不时获得垂直的卷轴。

你可以这样做：

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top