html - Ionic 中的相同高度卡片

Question

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

Size of the Display Screenshot

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

Half size of the Display Screenshot

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

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

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