Same Height Cards in Ionic - html

Question

I'm developing an application using Ionic and on the first page, I'm Trying to use Ionic Grid system to show some cards with an image background.
The Problem is that When I visit the page in the size of my own laptop's display everything is fine and cards have same height!
Size of the Display Screenshot
But once I resize the browser window the second card height changes (or Using Chrome's Emulator)
I want these two to have the same height in any situation. I've tried to fix this but no success.
Half size of the Display Screenshot
Here's the Snippet I've made. It's not my full code but it demonstrates the Issue I have.
angular.module('ionicApp', ['ionic'])
.controller('HomeCtrl', function($scope) {
})
<link href="http://code.ionicframework.com/1.2.4/css/ionic.min.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.2.4/js/ionic.bundle.min.js"></script>
<div ng-app="ionicApp">
<ion-content>
<!-- Row -->
<div class="row row-center">
<div class="col col-75">
<!-- Card -->
<a href="{link to a part}">
<div class="card">
<!-- Image of the Card -->
<div class="item item-image">
<img class="card-bg" src="http://placehold.it/800x200"/>
</div>
</div>
</a>
</div>
<div class="col col-25">
<!-- Card -->
<a href="{link to a part}">
<div class="card">
<!-- Image of the Card -->
<div class="item item-image">
<img class="card-bg" src="http://placehold.it/500x400"/>
</div>
</div>
</a>
</div>
</div>
</ion-content>
</div>
JSFiddle Link

Answer 1

It's because when you are using item-image class, Ionic sets images width to 100% and when you test your app on laptop or desktop, the right image can be shown in 100% of width and 100% of height, but when you test your app on phone, when browser tries to set the image width to 100%, the image height changes to less than 100%‍‍‍‍, and as you've seen the height of images is different, you should change your strategy