更改为横向模式时对齐失真 [离子]

Question

我正在 Ionic 移动应用程序中设计基于网格的图像显示。 问题是根据图像的屏幕尺寸固定高度。 在纵向模式下，我想要一个最大高度，而在横向模式下，我想要一个最大高度。如何实现。

以下是详细信息： 它在纵向模式下正确显示（下图）

但是当我将它切换到横向模式时，高度会变形（一张卡堆叠到另一张卡上）。（下图）

现在，卡片的原始高度为 107 像素。现在，当我将高度增加到 157 像素时，横向模式看起来很好。（下图）

但是，纵向模式会随着每个图像（固定尺寸图像）的高度增加而受到影响，从而在行之间留出空间（下图）

HTML
 <ion-nav-view>
    <ion-content>
      <div style="margin-top: 5px;">
        <div class="col col-50 cards" ng-repeat="list in lists" ng-style="{ 'background-image': 'url({{list.imageURL}})'} ">
        </div>
      </div>
    </ion-content>
  </ion-nav-view>


CSS
.cards{
      position: relative;
      width: 96%;
      background-size: 100%;
      background-repeat: no-repeat;
      padding: 0 px;
      float: left;
      height: 107px; // This works in Portrait Mode          
       }

Answer 1

使用媒体查询修复它：

@media only screen
 and (min-device-width: 401px)
 and (max-device-width: 736px){

 .cards{
  height: 157px;
 }
}
}
.cards{
  position: relative;
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 0 px;
  float: left;
  min-height: 107px;        
   }

Answer 2

试试这个。在这里我给你一个关于如何做到这一点的想法。

function doOnOrientationChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        // landscape
        // add class plus_height = +157px height of the card element
        angular.element(document.getElementById('card')).addClass('plus_height');
        break; 
      default:
        // portrait
        // add class remove_height = -157px height of the card element
        angular.element(document.getElementById('card')).removeClass('remove_height');
        break; 
    }
  }

  window.addEventListener('orientationchange', doOnOrientationChange);