How to automatically fit a picture in ion-img [Ionic 2]]

Ionic Framework ionic-v3
1

Hi, I’m trying to write a little app that displays images to, which are fetched from a webserver. I’m using to display the pictures and this works. But i always have a grey area because it doesnt scale completely:

image

Is there a way to make ion-img scaling up/down correctly based on the surounding container (div, ion-col, …) to cover the grey area completely with the image?

I have already looked into the documentation (doc), but i couldn’t find a solution. The pictures have different sizes, so i can’t set fixed values (i tried that for one picture but the grey area didn’t go away). I also tried to change the object-fit mode but it does not have any effect.

This my viewpost.html:

<ion-content class="viewpost">
<ion-grid>
 <ion-row>
  <ion-col col-12>
   <ion-img col-6 class="center" [src]="post.preview_url"></ion-img>
  </ion-col>
 </ion-row>
 <ion-row>
  <ion-col>
 	<a href="" class="center" style="width: 50%;" ion-button round>Test</a>
  </ion-col>
 </ion-row>
 </ion-grid> 
</ion-content>

My CSS looks like this:

page-viewpost {
	.viewpost {
		ion-grid {
			height: 100%;
		}
		ion-row {
			height: 100%;
		}
		ion-col {
			height: 100%;
		}
		.center {
    		margin-left: auto;
    		margin-right: auto;
    		display: block;
		}

		ion-img {
			object-fit: resize;
			height: 100%;
			width: auto !important;
			border: 0;
			padding: 0;
			background-color: grey;
		}
	}
}

I solved my problem by seperating the rows from each other. My CSS looks like this now:

page-viewpost {
	.viewpost {
		ion-grid {
			height: 100%;
		}
		.picture_preview {
			height: 60%;
		}
		.button_col {
			height: 40%;
		}
		ion-col {
			height: 100%;
		}
		.center {
    		margin-left: auto;
    		margin-right: auto;
    		display: block;
		}

		ion-img {
			object-fit: resize;
			width: auto !important;
			border: 0;
			padding: 0;
			background-color: grey;
		}
	}
}

My HTML File now looks like this:

<ion-content class="viewpost">
<ion-grid>
 <ion-row class="picture_preview">
  <ion-col col-12>
   <ion-img col-6 class="center" [src]="post.preview_url"></ion-img>
  </ion-col>
 </ion-row>
 <ion-row class="button_col">
  <ion-col>
 	<a [href]="post.file_url" class="center" style="width: 50%;" ion-button round>Open in Browser</a>
  </ion-col>
 </ion-row>
 </ion-grid> 
</ion-content>
2

For starters, ion-img is only meant to be used in a virtualscroll. Which obviously you aren’t using :slight_smile: So just use a normal img tag instead. Second, setting col-6 on a different tag then ion-col isn’t going to work as expected as far as I know.

If you want to use object-fit, I would recommend using object-fit cover. Normally when I’m stretching an image without distorting it, I’m using a background-image. So instead of using a img tag at all, do something like this:


  <ion-col col-12 [style.background-image]="post.preview_url" class="image--background"></ion-col>

.image--background {
   background-size: cover;
}

Possibly you need to sanitize the background-image URL, but you’ll see the warning when you get them.

1 Like
3

Ok, i will try this. I started using ion-img because of this textsnippet in the documentation: “starting up a new HTTP request, and rendering images. These two reasons is largely why ion-img was created. The standard HTML img element is often a large source of these problems”.

4

Yes it would be nice to lazy-load images through this tag, but it isn’t supported (yet). The docs you gave me also state this:

Note: ion-img is only meant to be used inside of virtual-scroll

So I can understand your confusion, but right now it isn’t supported.

5

I have overlooked that note, i have now replaced ion-img with img and now it works with every picture.