フルスクリーン オプションが必要なモバイル スライドショーがあります。正常に動作する疑似フルスクリーン CSS を作成しましたが、画像がいっぱいに引き伸ばされます。div でラップし、CSS を高さと幅の auto に設定するなど、いくつかの手法を試しましたが、それでも伸びます。
CSS は、すべてを 0 の上、下、左と右に設定するだけです。私はそれが「ハック」であることを知っていますが、これはHTML5ビデオではうまく機能し、比率も維持されます。しかし、画像にはそれほど熱くありません。私は CSS3 object-fit を試しましたが、ブラウザのサポートはほとんどまたはまったくありません。
画像を全画面表示にして縦横比を維持する方法はありますか? たぶん、レターボックスのような外観を使用して、他のスペースを埋めます（垂直または水平のいずれか）。画面サイズの異なる複数のモバイル デバイスで動作するように、これを動的にする必要があります。モバイル デバイスの Google 画像でこの作業を見たことがありますが、明らかに私よりも賢いです。
バックエンドで jQuery Mobile と PHP を使用しています。JS ソリューションが最適だと考えていましたが、PHP も大歓迎です。