Scaling images to any resolution : Guidelines and Best Practices

[themac]

Hi, i'm currently developing a quite simple cross platform app.
The target resolution will be from 800x480 to 2048x1536 (both portrait AND landscape).

So, is better to insert only one image on maximum resolution and let the app/system rescale it ?

And what about aspect ratio ? i think one solution could be to insert a square image to be sure no stretch will be applied and so that it will be centeerd.

but how to be sure that the image (and i have a map in another page too) will be centered ? How to center ?
I thought also about a solution : inserting a dynamic grid..a 3x3 one and using only the center cell, But doesn't seem to work.

Thanks in advance.

I shared my app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a , to be sure (baciuzziproducts)

TheMac

[Maryna Brodina]

Hello!
[quote:]inserting a dynamic grid..a 3x3 one and using only the center cell[/quote]Could you clarify how did you do that? And what is expected result? Do you want to place image in the center of the screen (vertically and horizontally aligned)?

[themac]

yes, exactly, !

Thus maximizing the space for image (and, obviously , minimizing "blank" space).

Otherwise i should have many images for the different aspect ratio.

Thanks !

TheMac

[Illya Stepanov]

Hi -

You can try to add style for tags on the page, let's say: 'mobilecontainer'

prebackground: url(image.jpg) no-repeat 50% 50%;/pre
note: you will need to set the full path name to the image file.

[themac]

why 50% ? and , i'll have to use Javascript ? like : $("mobilecontainer").css.background(url,"image.jpg","50%",50%") ??

Thanks

[Alena Prykhodko]

Please find more here http://docs.appery.io/documentation/b...
As styling is common JS rule, you can search online how to use more attributes.