Ionic中的相同高度的卡片

Question

我正在使用Ionic开发应用程序，并且在第一页上，我正在尝试使用Ionic Grid系统显示一些带有图像背景的卡片。问题是，当我以笔记本电脑的显示屏大小访问页面时，一切都很好，并且卡的高度相同！

显示屏幕截图的大小

但是，一旦我调整了浏览器窗口的大小，第二个卡的高度就会改变（或使用Chrome的模拟器），我希望这两个卡在任何情况下都具有相同的高度。我试图解决此问题，但没有成功。

显示屏幕截图的一半

这是我制作的代码段。这不是我的完整代码，但它演示了我遇到的问题。

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链接

Answer 1

这是因为当您使用item-image类时，Ionic 将图像宽度设置为100%，当您在笔记本电脑或台式机上测试您的应用程序时，可以以100%宽度和100%高度显示正确的图像，但是当您在手机上测试您的应用程序时，当浏览器尝试将图像宽度设置为100%，图像高度更改为小于100%\xe2\x80\x8d\xe2\x80\x8d\xe2\x80\x8d\xe2\x80\x8d，并且正如您所看到的图像高度不同，您应该更改您的策略

\n