How to mantain the aspect ratio of a picture?

ionic-v1
1

Hello, I’m a html / css developer and I’m working on an ionic project with different user pictures…
I want to have this image always with the same height / width but the problem is related to different aspect ratio.
Those images are coming from one service that retrieve us a base64 instead of url so there is no way to have a div, or something like that, with an image background and background-size: cover…

So… what do you think guys? is there any js or any plugin to mantain the aspect ratio on our images always?

Thanks in advance

2

I think I’m not understanding well, but if you dont know, you can use background-image: url(“base64image”) in css

3

No js needed, css is your friend here.

img{
  display: block;
  max-height: 100%;
  max-width: 100%;
}
4

Doesn’t work for example on item-avatar :S…

5

Yes… i know… but the issue that i’ve found is related with the ionic markup… i mean… for example, i need an image instead of a div for ‘item-avatar’… :S

6

Maybe a codepen could help us to help you?

7

Here the example, as you can see, we have two different pictures, one square that displays great the picture when is circle and one with its aspect ratio that doesn’t display properly,… doesn’t mantain the aspect ratio…

See the Pen yyXmjL by Dani (@dgproductions) on CodePen.

8

Check this codepen:

1 Like
9

Perfect :slight_smile: thanks soutlink :smile: i’ll try this option on another place.
Thanks for your quickly answer.

Regards