Google Chrome 28.0 全屏 API - 不尊重 CSS 'width:100%'答案

【问题标题】：Google Chrome 28.0 full screen API - does not respect CSS 'width:100%'Google Chrome 28.0 全屏 API - 不尊重 CSS 'width:100%'
【发布时间】：2013-07-24 11:58:32
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript jquery html google-chrome

【解决方案1】：

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

.leaflet-container:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

【讨论】：

【解决方案2】：

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

<div id="fsMe" style="width:100%; height:100%;">
    <img src="" alt="" style="height: 100%; width: auto;" />
</div>

【讨论】：