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

- mamsoudi

---

如果可以的话，请添加一个 jsfiddle 并附上您的 html 和 css 代码。 - Pedram

亲爱的@jiff，我在问题中添加了JSFiddle和Snippet两个。 - mamsoudi

你尝试过为图片添加“固定高度”吗？ - Pedram

@jiff 你有什么建议吗？因为我已经尝试了不同的方法来解决这个问题。我正在寻找解决方案。 - mamsoudi

我指的是这个 img.card-bg { height: 100px; } - Pedram

@jiff 是的，我之前尝试过。不起作用... - mamsoudi

Answer 1

因为当您使用item-image类时，Ionic会将图像宽度设置为100％。当您在笔记本电脑或桌面上测试应用程序时，正确的图像可以以100％的宽度和100％的高度显示。但是当您在手机上测试应用程序时，当浏览器尝试将图像宽度设置为100％时，图像高度会变为小于100％。正如您所看到的，图像的高度是不同的，您应该改变您的策略。

- Rasool Ghafari

---

Rasool Jan，感谢您的回复。我会考虑的。但问题是，在Ionic中添加图片到卡片的正确和充分的方法是使用带有item-image标签的<div>。我正在寻找CSS解决方案。也许可以使用FlexBox来解决，但我不知道如何操作。我会等待更多答案，如果没有收到任何答案，我将尝试制作自己的定制网格系统;) - mamsoudi