谷歌瀏覽器28.0全屏API - 不尊重CSS'寬度：100％'

Question

直到谷歌瀏覽器27.0，我們才能在頁面上有一個640x480的圖像（來自IP Camera），並且能夠使用JS全屏API使該元素使用element.requestFullScreen（「＃myelement」）全屏顯示。

通過設置'height：100％;寬度：自動;'在CSS中，圖像可以很好地適應99％的屏幕。這可以在Google Chrome（28.0之前）和Mozilla Firefox中使用。

由於谷歌瀏覽器28.0，全屏幕仍然有效，但'高度：100％'不會拉伸圖像比它的原始分辨率。因此，如果圖像高度爲480像素，那麼它不會伸展得太大。它只是將圖像置於黑色背景中間。

所以，我們試圖拿出一個解決方案。我們可以通過做'height：1080px'手動拉伸圖片，然後使其適合屏幕。所以我想，我們可以用JS計算屏幕大小，然後更新上飛寬度/高度。

有沒有更好的解決方案呢？這是一個錯誤還是「設計」？

Answer 1

包裹在一個div和全屏股利的圖像。

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

Answer 2

我看到全屏瀏覽器使用leaflet.js映射庫中的相同的效果：用黑色的上方和下方的垂直中心的元素。這個CSS劈爲我做的伎倆：

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