Javascript 当试图使图像适合屏幕而不失真时，调整大小时滚动条出现问题

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

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

我的问题是：

有没有更好的方法来实现这些（例如，全部使用CSS）

在第一次加载时，如果图片（在缩放之前）比视口宽，则在脚本计算视口高度时会显示一个滚动条。这意味着当我的脚本将div和img安装到窗口时，底部有一个白色的间隙，即滚动条的高度。我可以通过指定overflow:hidden来解决这个问题，但这似乎是一个需要解决的问题。有更好的办法吗？切换图像会更好吗

当我调整大小使div比图像宽时，我会在黑色div下得到一个白色部分，这会创建一个垂直滚动条。同样，我可以用overflow:hidden来摆脱这个问题，但我不喜欢这种方法。我想知道它为什么会在那里，以及如何摆脱它

有时，我可以使水平滚动条出现，当我调整大小时，它会闪烁开/关。溢出：隐藏修复了这个问题，但我想要一个更干净的解决方案

有没有更好的编码方法，或者我的jQuery/Javascript可以进一步优化

---

嗯。。。这是个棘手的问题。我发现最好的方法是将内容放在一个单元格表中，并将垂直和水平对齐属性设置为。。。。我想中间和中间？但无论如何，这是可以做到的。我会仔细研究一下，看看能不能找到一个例子

编辑：

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

是（对于100%高度部分）：

html，body，div{height:100%}

溢出：隐藏对我来说似乎很好。其他可能的解决办法：

document.write（'

（但应避免使用document.write）

（即，定义一个小的默认大小->无滚动条）

@Gerben建议：css最大宽度（最佳）

这似乎是水平滚动条需要占用的空间。我也只在特定的大小+比例下遇到这个问题

这是当图片数等于或非常接近全除数比时。我找不到溢出为：隐藏的hoo

不知道，在我看来已经足够好了

是的，由于边界效应，在调整大小时会出现奇怪的滚动条，当您从

if

切换到

else

时，滚动条就会出现，反之亦然

我从来没有得到过水平滚动条，但我仍然不时得到垂直滚动条。

您可以这样做：

div{
宽度：100%；
身高：100%；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
img{
位置：相对位置；
}

---

这都是纯HTML和CSS。如果您不想在结构中使用table，这是Joseph关于使用table的回答的另一种选择。

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

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

---

您可能希望使用img{max width:100%}，这将解决hor.scrollbar问题。您是对的，谢谢。它确实解决了最初的水平滚动条问题（2）我确实找到了一种不使用JavaScript的方法，只使用HTML和CSS3。请看这里，您可能会读到关于垂直对齐的文章：是的，我知道它在带有默认显示（块）的div上不起作用，我忘了添加display:table单元格。正如我说的，它是使用实际表（）。我确实找到了一种不用JavaScript的方法，只使用HTML和CSS3。请参见此处。