1

Using Ionic 4 I'm trying to create a 3x3 grid of squares, where each square contains an image. The images have different sizes and orientations (portrait / landscape) but the squares shall have an aspect ratio of 1:1.

Simply adding the images to rows and columns, for example like this:

<ion-grid>
<ion-row>
    <ion-col><img src="landscape.jpg"></ion-col>
    <ion-col><img src="portrait.jpg"></ion-col>
    <ion-col><img src="landscape.jpg"></ion-col>
</ion-row>
<ion-row>
    <ion-col><img src="landscape.jpg"></ion-col>
    <ion-col><img src="landscape.jpg"></ion-col>
    <ion-col><img src="landscape.jpg"></ion-col>
</ion-row>
<ion-row>
    <ion-col><img src="portrait.jpg"></ion-col>
    <ion-col><img src="portrait.jpg"></ion-col>
    <ion-col><img src="portrait.jpg"></ion-col>
</ion-row>

gives the following layout: Images added to rows and columns

which is not what I want since the grid squares have varying aspect ratios. What I'm trying to accomplish is this layout: Preferred layout

The preferred answer to the following SO question comes close: Grid of responsive squares

This solution works for squares containing landscape images. For example, the following code:

HTML:

<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                <img src="landscape.jpg">
            </div>
        </div>
    </div>
</div>

CSS:

.square {
  background-color: lightgray;
  width: 100%;
  padding-bottom: 100%;
  /* 1:1 Aspect Ratio */
  position: relative;
}

.content {
  position: absolute;
  height: 100%;
  width: 100%;
}

.table {
  display: table;
  height: 100%;
  width: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  width: 100%;
}

gives the following layout: Square containing landscape image

But when the square contains a portrait image the result is this: Square containing portrait image

Does anyone know how to solve this?

UPDATE: The answer of 'brianspinosa' works if I set the "background-repeat" property to "no-repeat" and the "background-position" property to "center".

For example, the following code:

.square {
  width: 100%;
  padding-bottom: 100%;
  background-color: blue;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
<ion-grid>
  <ion-row>
    <ion-col>
      <div class="square" style="background-image: url(https://via.placeholder.com/640x480)">
      </div>
    </ion-col>
    <ion-col>
      <div class="square" style="background-image: url(https://via.placeholder.com/342x480)">
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

gives the following correct layout: Correct layout

Arie
  • 103
  • 2
  • 9

1 Answers1

0

What you are trying to do is achieve what the "background-size" property does for background images. You could update your markup to set the images as background images and then set the "background-size" property to "contain".

The other thing you could do is use the object-fit property on your images, though there is no IE support for it.

brianespinosa
  • 2,408
  • 12
  • 22