Catalyst Creations
Posts: 0
Joined: Sat Dec 28, 2013 1:34 am

Stop images stretching when phone rotates?

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

Igor
Posts: 0
Joined: Tue Apr 02, 2013 12:05 pm

Stop images stretching when phone rotates?

Hello,

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

Catalyst Creations
Posts: 0
Joined: Sat Dec 28, 2013 1:34 am

Stop images stretching when phone rotates?

Awesome.. so simiple...

Thanks heaps Igor... Again..

Peter LPunkt
Posts: 0
Joined: Mon Jan 13, 2014 3:07 pm

Stop images stretching when phone rotates?

Hi there Callum Heald,

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

Cheers

Illya Stepanov
Posts: 0
Joined: Mon Mar 18, 2013 8:48 am

Stop images stretching when phone rotates?

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

Peter LPunkt
Posts: 0
Joined: Mon Jan 13, 2014 3:07 pm

Stop images stretching when phone rotates?

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.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Stop images stretching when phone rotates?

Hello Peter,

Have you checked if your css applied to your image?

Peter LPunkt
Posts: 0
Joined: Mon Jan 13, 2014 3:07 pm

Stop images stretching when phone rotates?

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.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Stop images stretching when phone rotates?

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...

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

Stop images stretching when phone rotates?

Hi Peter,

Did you solve this?

Return to “Issues”