Javascript 谷歌Chrome 28.0全屏API——不尊重CSS'；宽度：100%'；

在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像素高，它将不会拉伸更大。它只是用黑色背景将图像居中

因此，我们正试图找到一个解决方案。我们可以通过执行“高度：1080px”手动拉伸图片，然后使其适合屏幕。所以我想我们可以使用JS计算屏幕大小，然后动态更新宽度/高度

---

有没有更好的解决办法？这是一个bug还是“出于设计”？

将图像包装在一个div中，然后全屏显示div

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

---

将图像包装在div中，然后全屏显示div

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

---

我在全屏Chrome上看到了同样的效果，我使用了slipal.js映射库：一个垂直居中的元素，上面和下面都是黑色。这个css黑客帮了我的忙：

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

---

我在全屏Chrome上看到了同样的效果，使用了plicate.js映射库：一个垂直居中的元素，上面和下面都是黑色。这个css黑客帮了我的忙：

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