Image Preview Modal - Centering Image Across Full Screen with Header

Ionic Framework
1

Hello,

I’m trying to implement a full-screen image preview modal. My current implementation, even with ion-content padding removed and height: 100% on the image container, doesn’t center the image truly across the entire screen. It appears to be centered only within the ion-content area, below where the ion-header sits, pushing the image down.

What I’ve tried:

  • Using position: fixed or position: absolute within the ion-header. This allows the image to center on the full screen, but I’m unsure if this is considered a good practice.
  • Omitting ion-header entirely and attempting to create a custom top bar (with a close button) using position: absolute or fixed directly within the modal’s main template.

I’m looking for the most robust and recommended approach to achieve true full-screen image centering in an Ionic modal, ensuring the ion-header (ideally transparent) can float over the image without affecting its vertical alignment.

2

I don’t completely understand the problem. Are you using ion-modal? If not, why not? :grinning_face: It should overlay the entire screen and you should be able to center your image.

Your ion-header is part of the modal or part of the page where the modal is being opened from?

3

No its just a simple modal like this, with position absolute/ in the ion-header:

<ion-header class="ion-no-border" [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="close()">
        <ion-icon name="close-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title class="ion-text-center">{{ file.name }}</ion-title>
     <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="ellipsis-horizontal-circle-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <swiper-container
    centered-slides="true"
    zoom="true"
    navigation="true"
    [pagination]="{ hideOnClick: true }"
    scrollbar="true"
    class="swiper-container"
  >
    <swiper-slide>
      <div class="swiper-zoom-container">
        <img
          [src]="file.imagePreview"
          [alt]="file.name"
          class="preview-img"
          loading="lazy"
        />
      </div>
    </swiper-slide>
  </swiper-container>
</ion-content>
4

This isn’t a ionic issue more of a css issue. Look here for guidance: CSS Centering Images