Question

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

在纵向模式下查看1024px W x 768像素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%
}

离子模态中的全屏，居中图像

1 个答案: