Question

我正在Ionic Mobile App中设计基于网格的图像显示。问题是根据图像的屏幕大小来修复高度。在纵向模式下，我想要有一个最大高度，当在横向模式时，我想要有一个最大高度。如何实现这一目标。

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

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

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

但是，肖像模式受到影响，因为每个图像（固定大小的图像）的高度增加，从而在行之间放置一个空格（下图）

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);

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

2 个答案: