Image grid layout with web component images - ionic-framework

Question

My goal is to achieve this layout for an array of Images:
As you can see, a simple 2 column grid of square images - this is quite easy in a Bootstrap environment where one specifies 2 cols or size 6 each, then simply setting the images' CSS object-fit to cover in order to avoid stretching and setting the height to auto.
Problem is, where I'm trying to achieve this is in Ionic 4 where the img element is a web component and only certain properties are exposed to that can be customized. So far I can get the images displayed in a 2 column fashion but the aspect ratios are off.(Also I HAVE to use the element, so cannot simply use HTML5 img element).
Here is what I have so far:
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let image of selectedImageURIs">
<ion-img [src]="image"></ion-img>
</ion-col>
</ion-row>
</ion-grid>
Note: The Ionic Framework has it's own 'Bootstrap' like framework called ion-grid. What I end up with is this:
I know need to get them to be the same in height and with and set the object fit to cover, but how can I do this with an ion-img? I is a web component so the Shadow Dom comes into play. The docs just mention "The component uses Intersection Observer internally". Will that be able to do what I need? I'm new to web components to trying to understand what I'm missing.

Answer 1

Here is a solution that I used for my Ionic 4 app. I used css to accomplish the look you're going for. Your template will look something like this and using ion-img to take advantage of the lazy loading feature.
html
<ion-grid>
<ion-row>
<ion-col *ngFor="let category of categories" size="6">
<button #categoryButton type="button" (click)="selectCategory(categoryButton, category)" class="category-button">
<ion-card padding class="category-card">
<ion-card-content class="category-card-content">
<ion-img *ngIf="!imageNotLoaded; else loadingCategory" src="{{category.icon_image}}" class="category-icon" (ionError)="imageNotLoaded = true"></ion-img>
<ng-template #loadingCategory>
<ion-skeleton-text animated style="height: 70px;width: 70px"></ion-skeleton-text>
</ng-template>
</ion-card-content>
<ion-card-title class="category-title">{{category.name}}</ion-card-title>
</ion-card>
</button>
</ion-col>
</ion-row>
</ion-grid>
Set up your sass code like this.
scss
ion-col {
text-align: center;
}
.active {
.category-card {
border-color: var(--ion-color-primary)!important;
box-shadow: 0 4px 16px var(--ion-color-primary)!important;
}
}
.category-button {
padding: 4px;
background: transparent;
.category-card {
min-width: 100%;
margin: 0;
border: 2px solid;
.category-card-content {
text-align: center;
.category-icon {
width: available;
}
}
.category-title {
font-size: x-small;
font-weight: bolder;
}
}
}
This then yields the final result as this picture below.
Note: this is all component level code other wise you'll need to use ::ng-deep to get around the shadow dom for your css code.

Answer 2

page.html
<ion-row class="row-card">
<ion-col size="6" class="col-card">
<ion-card class="card-service">
<img src="../../assets/images/services/w-medical.png" class="img-service" />
</ion-card>
</ion-col>
<ion-col size="6" class="col-card">
<ion-card class="card-service">
<img src="../../assets/images/services/w-professional.png" class="img-service" />
</ion-card>
</ion-col>
</ion-row>
page.css
.row-card{
padding: 0px 5px 0px 5px;
.col-card{
padding: 0px;
.card-service{
margin: 5px;
height: 160px;
border-radius: 0px;
padding: 8px;
box-shadow: 0px 0px;
.img-service{
height: 100%;
width: 100%;
object-fit: cover;
margin: 0 auto;
border: 0 solid #024f9a;
background: linear-gradient(#0486ca,#024f9a);
border-radius: 50%;
padding: 15px;
font-weight: bold;
}
}
}
}

Answer 3

Here is working one
ion-grid >
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let image of [1,2,3,4,5,6,7,8,9,10,11]">
<img src=''/>
<!-- <div class="image-container" [style.background-image]="'url(assets/img/' + image + '.jpg)'"></div> -->
</ion-col>
</ion-row>
</ion-grid>