Issue with positioning of image in IONIC


#1

Hi, I did the following steps. I found out that the positioning of top is not functioning in IONIC if I use percentage. The issue is that if I do not use percentage, then the image will appear differently in devices that is different sizes. Can anyone share how you do it ? Appreciate your help here.

You can see that the image is at the top when I already specify it to be at top: 80%.
This only happens in IONIC. If you use other javascript testing environment like https://jsfiddle.net/JSmithd/7nfe2wb6/ , there is no issue.

  1. ionic start myapp blank
  2. ionic platform add android

In the index.html , I added the following

<ion-content>
    <img class="startbutton" src="smiley.gif" />
</ion-content>

then, in the style.css, I added the following

.startbutton{
    position: absolute;
    transition: .5s ease;
    left: 29%;  
    top: 80%;
}

#2

Hey
Try to add your image to the " img" folder and write the src this way:
src="img/smiley.gif"
Then your image will appear in its original size.