風景モードに変更すると歪みが歪みます[Ionic]

Question

Ionic Mobile Appでグリッドベースの画像表示を設計しています。 問題は画像の画面サイズによって高さを修正することです。 肖像画モードでは、私は最大の高さを持っていると私は最大の高さを持っている横モードで、私はしたい。それを達成する方法。

以下

詳細は以下のとおりです。それは

（画像の下）ポートレートモードで正しく表示され が、私は風景モードに切り替えたときに、高さが（1枚のカードが他の上に積み重ねられます）歪んます（以下。画像） ​​

ここで、カードの元の高さは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

はこれを試してみてください。ここで私はあなたにこれを行う方法のアイデアを与えます。

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

Answer 2

メディアクエリでそれを修正：

@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;   
    }