イオンモーダルで全画面画像を中心に

Question

私はIonic V1を使用しています。画像は、最大（全画面）の大きさにしたい画像を示していますので、縦横に中心があり、 （縦または横）に応じて、幅（幅または高さ）を調整します。

ポートレートモードで1024px W x 768px Hの画像を表示すると、画像はデバイスが横向きモードであるかのようにサイズが変更され、側面が切り取られます。

しかし、デバイスをランドスケープモードにすると、完全なフルスクリーンイメージが表示されます。

<ion-content> 
    <div id="photo-fullscreen" ng-click="photoModalClose()" style="width:100%;height:100%;background:url({{fullscreenPhoto}}) center center no-repeat;"> 
    </div> 
</ion-content> 

このCSSを設定すると、画像が中央に配置され、寸法がデバイスの向きと一致するように設定できますか？

Answer 1

は、ここで私はそれを解決方法は次のとおりです。

<ion-content> 
    <div class="flex-content"> 
    <img id="photo-fullscreen" ng-src="{{fullscreenPhoto}}"> 
    </div> 
</ion-content> 

はCSS：

.flex-content { 
    margin: 0px auto; 
    width: 100%; 
    height: 100%; 
    display: flex; /* Magic begins */ 
    flex-direction: column; 
    justify-content: center; /* Center in main axis */ 
    align-items: center; /* Center in cross axis */ 
} 
#photo-fullscreen { 
    max-width: 100%; 
    max-height: 100% 
}