Handle images for different OS and devices

Ionic Framework ionic-v3
1

I am developing a cross platform application (android, IOS, windows) using ionic3 and angular4. Can anybody please let me know how to handle the images for different devices and OS?. Because we need to use different pixels for different OS and different size of devices.

2

Where do you display these images?
Why do they have to be different by OS and device?

3

Hi
Need to display an image for both background and foreground also.

Thanks

4

That is great. But why do you want different sizes by OS and device?

5

Hi,
I have a image and need to handle it for different devices. Can you please let me know how to handle it?

Thanks

6

No, because I still don’t know why you have to handle anything differently for different OS and devices.

7

Does the same image (some fixed size pixels) will display correctly on different size of devices? For ionic, i don’t know how to handle this? Normally in Jquery we would use to check the width by following line

var win = $(window).width();
if (win >= 1024) {
set this size of image
}
else if (win >=2048)
{
set corresponding size image
}

for example to display the image on iPhone 6 devices, we should have the image in 1080x1152 pixels. Like that different pixels for different image. How to handle this?

like this, how we can handle in ionic2? I think you might understand my problem now.

Thanks

8

So you want to display different images, not just different sizes of the same image, depending on the viewport size. Correct?

9

I am having only one image (fixed size) and want to display (background) on different devices. Hope you understand now… :grinning:

10

Unfortunately I now don’t understand again. Please explain.

11

I am having background.png image in the assets folder.

CSS:
.display-bg-image {
background-image: url("…/assets/images/background.png");
background-repeat: no-repeat;
background-size:cover !important;
}

html:

ion-content padding class=“display-bg-image”

will the above code automatically do the scaling and display the image resized for different devices (different screen size) ?

Thanks

12

You will have to use this for the sizing of backgroung images: