Ionic - Image scale is not respected on some devices - css

Question

I made an app with Ionic framework and I have a problem on some devices.
This is my homepage :
And on some devices (iPhone 5S, iPhone 5C, Samsung S5), the page is displayed like this :
This page is made with an ion-grid.
Here is a part of my css :
ion-grid{
height: 100%;
ion-row.homeM{
height: 20%;
img{
height: 80%;
}
p{
margin-top: 0px;
}
}
ion-row.homeML{
height: 25%;
img{
height: 75%;
}
p{
margin-top: 0px;
}
}
}
ion-row.homeM is for portrait display and ion-row.homeML is for landscape display.
Help is welcome :) !
Thanks

Answer 1

Did you try to specify a max-height in px, dpi, em or other unit?
This may be related to a resolution/space issue because of the percentage in the css.
Try something like:
ion-grid{
height: 100%;
ion-row.homeM{
height: 80px;
img{
height: 60px;
}
p{
margin-top: 0px;
}
}
ion-row.homeML{
height: 60px;
img{
height: 40px;
}
p{
margin-top: 0px;
}
}
}

Answer 2

To create Responsive design try using "vh for height" and "vw for width" or "em"
instead of "px or %"
soo try this:
ion-grid{
height:98vh;
ion-row.homeM{
height: 40vh;
img{
height: 100vh;
/*you can add max-height to prevent img to be stretched*/
max-height:100px;//for example
width:30vw;
}
p{
margin-top: 0px;
}
}
}
I hope this help and you can know more about what I said From here :
ViewPort Unit