# Image Size CSS

**URL:** <https://forum.ionicframework.com/t/image-size-css/22559>\
**Category:** ionic-v1\
**Created:** [May 7, 2015, 1:50pm UTC](https://forum.ionicframework.com/t/image-size-css/22559 "2015-05-07T13:50:58Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![rcpadilha](https://avatars.discourse-cdn.com/v4/letter/r/3e96dc/32.png) [@rcpadilha](https://forum.ionicframework.com/u/rcpadilha)\
**Post date:** [May 7, 2015, 1:50pm UTC](https://forum.ionicframework.com/t/image-size-css/22559/1 "2015-05-07T13:50:58Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![drodrigo](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@drodrigo](https://forum.ionicframework.com/u/drodrigo)\
**Post date:** [May 7, 2015, 2:05pm UTC](https://forum.ionicframework.com/t/image-size-css/22559/2 "2015-05-07T14:05:40Z")

</div>

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 😄

> **[Sign-in, then Tabs: Nightly](https://codepen.io/drodrigo/pen/XbmQoq)**
>
> Demo showing how each tab has its own history stack. Navigating between each tab remembers the correct back and forward views that were visited. Forke...