I'm currently working on designing a grid-based image display for an Ionic Mobile App. One of the main challenges I'm facing is adjusting the heights of the images based on the screen size. I want to set a maximum height for both portrait and landscape modes. How can I accomplish this?
Here are some specifics: The grid looks correct in Portrait Mode (see Image Below) https://i.stack.imgur.com/8hux4.png
However, when switching to Landscape Mode, the height gets distorted with one card overlapping another (refer to Picture Below) https://i.stack.imgur.com/RaVfk.png
To address this issue, I increased the original height of the cards from 107px to 157px, which helped improve the appearance in Landscape mode (see Image Below) https://i.stack.imgur.com/Zb3NC.png
Unfortunately, increasing the height also affected the layout in portrait mode as it introduced spaces between rows due to the fixed size of each image (see Image Below)
https://i.stack.imgur.com/qoIzF.png
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
}