0

在 Google Chrome 27.0 之前，我们能够在页面上拥有 640x480 图像（来自 IP 摄像机），并且能够使用 JS 全屏 API 使用 element.requestFullScreen("#myelement") 使该元素全屏显示.

通过设置'高度：100%; 宽度：自动；' 在 CSS 中，图像会很好地拉伸以适应 99% 的屏幕。这适用于 Google Chrome（28.0 之前）和 Mozilla Firefox。

从 Google Chrome 28.0 开始，全屏仍然有效，但“高度：100%”不会拉伸图像超过其原始分辨率。因此，如果图像的高度为 480 像素，则它不会被拉伸得更大。它只是以黑色背景居中图像。

因此，我们正在尝试提出解决方案。我们可以通过执行'height: 1080px'来手动拉伸图片，然后让它适合屏幕。所以我想我们可以使用 JS 计算屏幕尺寸，然后即时更新宽度/高度。

有没有更好的解决方案？它是一个错误还是“设计使然”？

4

2 回答 2

4

我在使用 Leaflet.js 映射库的全屏 Chrome 中看到了相同的效果：垂直居中的元素，上下均为黑色。这个css hack为我做了诀窍：

.leaflet-container:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}
于 2013-10-08T06:07:36.540 回答
0

将图像包装在 div 中并全屏显示 div。

<div id="fsMe" style="width:100%; height:100%;">
    <img src="" alt="" style="height: 100%; width: auto;" />
</div>
于 2013-07-24T12:03:58.263 回答