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 Link

Answer 1

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

离子中相同的高度卡

1 个答案: