Ionic页面问题：移除ion-row间距及图片适配含导航栏首屏

嘿，我来帮你搞定这两个Iionic页面的问题，一步步来：

问题1：移除ion-row组件之间的间距 #

Ionic的ion-row默认带有margin-bottom属性，这就是行之间出现间距的原因。你只需要在页面的SCSS里覆盖这个默认样式就行：

page-tests1 {
  ion-row {
    text-align: center;
    margin-bottom: 0; // 关键：移除行底部的默认间距
  }
  // 其他原有样式...
}

问题2：让图片以相同尺寸填满带导航栏和标签页的页面 #

要实现这个效果，我们需要确保图片能占满导航栏（navbar）和标签页（tabbar）之外的剩余空间，并且三个图片平分这个高度，同时保持比例不拉伸。具体操作如下：

第一步：修改HTML，给ion-content添加无内边距属性 #

首先给<ion-content>加上no-padding，避免内容区域有默认内边距：

<ion-content no-padding>
  <ion-row>
    <ion-col no-padding (click)="openPage1()">
      <p class="image-title">1</p>
      <img src="assets/imgs/2560x1440.png" />
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col no-padding (click)="openPage2()">
      <p class="image-title">2</p>
      <img src="assets/imgs/2560x1440.png" />
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col no-padding (click)="openPage3()">
      <p class="image-title">3</p>
      <img src="assets/imgs/2560x1440.png" />
    </ion-col>
  </ion-row>
</ion-content>

第二步：更新SCSS，用Flex布局实现高度平分和图片填充 #

通过Flex布局让三个ion-row平分ion-content的高度，同时设置图片填满容器并保持比例：

page-tests1 {
  ion-content {
    display: flex;
    flex-direction: column;
    padding: 0; // 确保内容区域无内边距
  }

  ion-row {
    text-align: center;
    margin-bottom: 0; // 同时解决第一个问题的间距
    flex: 1; // 让每个行平分content的可用高度
    position: relative; // 让标题的绝对定位基于当前行
  }

  ion-col {
    height: 100%; // 列占满所在行的高度
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover; // 图片填满容器，保持原有比例，不会拉伸变形
  }

  .image-title {
    position: absolute;
    top: 25%;
    font-size: 2em;
    width: 100%;
    font-weight: bold;
    color: white;
    z-index: 10; // 确保标题显示在图片上方
  }
}

这样调整后，三个图片会自动平分导航栏和标签页之外的页面高度，行之间没有间距，图片也能完美填满各自的区域啦～

内容的提问来源于stack exchange，提问作者firewallcj