Same Height Cards in Ionic

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

Same Height Cards in Ionic

1 Answers