Link to sketch: https://editor.p5js.org/kh1785/sketches/D0uUYjiq
Step by step approach to get properly scaled image.
There are two images presented on the screen. The size of the one the bottom is fixed but the image on top can be changed by the user. By changing the x position of the mouse, the user can resize the image and when the size of the top image matches the size of an original image (within 15-pixel proximity), the color of the background will randomly change ranging from 0 to 360 according to the HSB color system.
Another interactive function of the sketch is an automatic image resizing feature. By clicking the mouse, the size of the top image changes instantly to the size of the original image.