How to dynamically resize the image in html

I am making a text editor using basic html, css and javascript, I want to add a functionality for the user to resize the image after uploading it, like we do in MS Word.

I searched this several times but I didn’t get the result.

I tried to tackle this problem by making a resizable div and putting the image in this div, by setting the height and width of image 100% according to the div. Now, I can resize the image by resizing the div. But, the problem here is, user can write in this div also and i don’t want that, if i set contenteditable = “false” for this div then user can’t delete this image.

So, is there a way to dynamically resize the image in html using basic css and js.