Ionic 3中如何去除全屏图片加载控件的空白区域？

这个问题我之前也碰到过！Ionic 3的Loading组件默认给内部的.loading-wrapper元素加了不少默认样式（比如内边距、最小高度、背景色），这就是导致你的全屏图片周围出现空白的核心原因。下面给你两种可行的解决办法：

方法一：自定义CSS类（推荐，维护性更强） #

首先修改你的Loading创建代码，添加一个自定义CSS类：

presentLoadingDefault() { 
  let loading = this.loadingCtrl.create({ 
    spinner: 'hide', 
    content: `<img src="assets/img/gif.gif"/>`,
    cssClass: 'fullscreen-loading' // 新增自定义类名
  }); 
  loading.present(); 
  setTimeout(() => { 
    loading.dismiss(); 
  }, 5000); 
}

接着打开全局样式文件src/app/app.scss，添加以下样式覆盖Loading的默认样式：

.fullscreen-loading {
  .loading-wrapper {
    // 移除默认背景色和阴影
    background-color: transparent;
    box-shadow: none;
    // 清除内边距，消除图片周围的空白
    padding: 0;
    // 取消最小高度限制，让图片决定容器高度
    min-height: auto;
    // 让容器占满整个屏幕空间
    width: 100%;
    height: 100%;
  }

  // 确保图片填满容器
  img {
    width: 100%;
    height: 100%;
    object-fit: cover; // 可选：保持图片比例并覆盖容器，不需要的话可以删掉
  }
}

方法二：内联样式快速解决 #

如果只是临时需求，不想写全局样式，也可以用内联样式快速调整：

presentLoadingDefault() { 
  let loading = this.loadingCtrl.create({ 
    spinner: 'hide', 
    content: `<img src="assets/img/gif.gif" style="width:100%; height:100%;"/>`,
    cssClass: 'loading-no-padding'
  }); 
  loading.present(); 
  setTimeout(() => { 
    loading.dismiss(); 
  }, 5000); 
}

然后在app.scss里补充一行样式清除容器内边距：

.loading-no-padding .loading-wrapper {
  padding: 0;
  background: transparent;
}

额外注意点 #

• 确保你的GIF图片本身是透明背景的，如果图片自带白色背景，即使去掉容器空白也会显示图片自身的背景色。
• 如果需要图片居中显示而非全屏覆盖，可以把object-fit: cover改成object-fit: contain，或者给图片添加合适的margin值。

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