Image Size CSS


#1

Hello everyone!

I’m having some trouble understanding some behaviours with ionic.
I have an image, which is 86x86 pixels.

If I put it directly on code, with no CSS at all, the image is displayed stretched, however, the size of the element is still 86x86.
If I display the same image, using width: 15% and height: 15% via CSS, the actual size of the image changes depending on the screen size of the device.

How exactly does ionic handles images sizes to make them responsive regardless the device?
Also, I’ve created all the images on photoshop using iPhone 6 presets, and when I try to use them on the actual device, all the images look way bigger than they are on Photoshop.

I really appreciate some help here guys!

Thank you!


#2

Hi @rcpadilha

I don’t know if Ionic have somethign specific to this.

but here’s what I do to keep images responsive across mutiple devices.

first you create an image really big (to not lose quality), after that I create a wrapper for the images and set the percentage that I want my image to fill (width percentage).

Take a look at this codepen and see if I understood your problem correctly :smile: