Page 1 of 1

Image Switching

Posted: Sun Jan 12, 2014 10:12 pm
by Cyberpatriot

I have found a how to re-size my images based on percentages. I have found a lot of topics on image resizing here as well, but nothing about switching the images with different screen sizes. I would like to use different images for different screen sizes. Is this possible? I would like to put an appropriate image size per screen size so I'm not losing any definition by re-sizing.


Image Switching

Posted: Sun Jan 12, 2014 10:45 pm
by Alena Prykhodko

Hello,

To change images automatically, you would need to determine screen size in runtime and update the components accordingly.


Image Switching

Posted: Sun Jan 12, 2014 10:58 pm
by Cyberpatriot

Then using percentage sizes what is the best way to keep images from stretching or loosing definition? Are people using large images and then resizing them down? I'm really missing how images are handled with different screen sizes and keeping them from getting fuzzy.


Image Switching

Posted: Sun Jan 12, 2014 11:37 pm
by Alena Prykhodko

For images you want to scale set Class Name in Image component Properties, then create New CSS asset (http://docs.appery.io/documentation/w...) with code:
pre
.image_ClassName {
width: 20% !important;
height: auto !important;
} /pre

Set percentage as you need.