Ionic - Image scale is not respected on some devices

0
votes

I made an app with Ionic framework and I have a problem on some devices. This is my homepage : enter image description here

And on some devices (iPhone 5S, iPhone 5C, Samsung S5), the page is displayed like this :

enter image description here

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

2
cssionic-frameworkdisplay

2 Answers

0
votes

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;
        }
    }
}
0
votes

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