全屏，以离子模态为中心图像

Question

我正在使用离子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%
}