How to change a remote image size before it's shown?

Hello guys, I have a single page with multiple horizontal sliders. However, some of the pictures’ size are different which makes them not be the same size when the device is rotated to landscape.

Plus what I am using to show the images in a img html tag is an url to the image, how can I do it to resize them before they’re shown?


perhaps use a size in percent, not in px ??

No, it has to be in px since the begining because Ionic’s slide already apply a % over the pixels the image have, so all images must be the same in order to look the same.

The exact specifics of what to do with the result (keep as base64, write to filesystem, &c) depend on your specific needs, but if you search for “html5 canvas resize image”, you should find ample samples of the basic operation. Basically, you create a temporary <canvas> element of a specific size, render your image into it, and then snag the result.