关于css：全屏，离子模式中的居中图像

Full screen, centered image in ionic modal

我正在使用 Ionic V1 并有一个简单的模式，它显示了我想要最大(全屏)尺寸的图像，以便它垂直和水平居中，并在适当的尺寸(宽度或高度)上全屏取决于设备方向(纵向或横向)。

在纵向模式下查看 1024 像素宽 x 768 像素高的图像时，图像的大小与设备处于横向模式时一样，并且两侧被裁剪。

但是将设备旋转到横向模式会产生完美的全屏图像。

1
2
3
4

<ion-content>

</ion-content>

如何设置此 CSS 以使图像居中且尺寸与设备方向匹配？

我是这样解决的：

1
2
3
4
5

<ion-content>

<img id="photo-fullscreen" ng-src="{{fullscreenPhoto}}">

</ion-content>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13

.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%
}