Forum | Appery.io

Hey guys,

Im having trouble keeping the aspect ratio of images accross different devices. Ive used width & height % with all images but when phone is rotated the images are stretched. How would i go about stopping the stretching?

Thank you in advance

Hello,

Let us know if this help https://getsatisfaction.com/apperyio/...

Awesome.. so simiple...

Thanks heaps Igor... Again..

Hi there Callum Heald,

could you post a code snippet of your solution? Did you use Js or css?

Cheers

Hi Peter - Have you tried the link suggested by Igor? It's a CSS solution.

Hi there

Yes, it works in browser mobile preview (using chrome).
On phone (s3, android 4.3) using android browser it doesnt work.

This is the css im using:
img.centeredImage {
height:auto;
width:90vw;
display: block;
margin-left: auto;
margin-right: auto;
}

is it a bad idea to use height:auto? the pic isnt a square.
I am guessing using a css class overrides the values used in pictures dimension in the app builder, since the fields cant be empty and i dont want to use % or pt/px so i set both to auto.

Hello Peter,

Have you checked if your css applied to your image?

Yea, in chrome i can see the class and the specification, it works the way i want.

On the device in the browser, the height is about 100% of the screen, and the width is too broad, 2/3 of the picture is cropped. If i enter a value for height e.g. 90%/vh etc. the pic is unproportionally displayed. I want the pics to keep proportions. To my knowledge this can be done with 'auto' for height.

Hello Peter,

Could you send us public link to your application and describe steps how to reproduce your issue.
http://docs.appery.io/documentation/s...

Hi Peter,

Did you solve this?