How to adjust the size of sprites for different phone screen resolutions?

Question

css

For example, I need to place 3 sprites at the top of a canvas element. How can I make these sprites grow/shrink with the canvas when the resolution changes, instead of staying the same size?

Answer 1

try to set a pseudo-element after on the div with the picture, make it 100% wide, position it as an absolute at the bottom, set some height (you need to choose the right one) and set the border-radius

Answer 2

In the canvas, all the same, not sprites, but Image.
And you need to use CanvasScaler.