0

Google Chrome 27.0 までは、(IP カメラからの) 640x480 の画像をページに表示でき、JS フルスクリーン API を使用して、element.requestFullScreen("#myelement") を使用してその要素をフルスクリーンにすることができました。 .

「高さ：100％;」を設定することにより。幅: 自動;' CSS では、画像は画面の 99% に美しく収まるように引き伸ばされます。これは、Google Chrome (28.0 より前) および Mozilla Firefox で機能しました。

Google Chrome 28.0 以降、全画面表示は引き続き機能しますが、'height: 100%' はネイティブ解像度よりも画像を引き伸ばすことはありません。そのため、画像の高さが 480 ピクセルの場合、それ以上に引き伸ばされることはありません。黒い背景で画像を中央に配置するだけです。

そのため、解決策を考え出そうとしています。'height: 1080px' を実行して画像を手動で引き伸ばすことができます。これにより、画像が画面に収まるようになります。したがって、JSを使用して画面サイズを計算し、その場で幅/高さを更新できると思います。

これに対するより良い解決策はありますか？それはバグですか、それとも「設計による」ものですか?

4

2 に答える 2

4

leaflet.js マッピング ライブラリを使用して、全画面表示の Chrome でも同じ効果が見られました。垂直方向に中央に配置され、上下に黒の要素です。このcssハックは私のためにトリックをしました:

.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 に答える