title: Put a div on top of an image exactly in position with object-fit
body: <p>I want to put a div on top of this image(a cupcake).
  <a href="https://i.stack.imgur.com/7Mj25.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Mj25.jpg" alt="enter image description here"></a></p>
  
  <p>For example, I want to put my div on top of the red cherry, like this <a href="https://i.stack.imgur.com/meE7B.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/meE7B.jpg" alt="enter image description here"></a></p>
  
  <p>Because my image has a dynamic width and height and I am using <code>object-fit: cover;</code> in my css,
  so the div position has to move accordingly when my image resize.</p>
  
  <p>If my image has fixed dimension, using <code>position: absolute;</code> will do the job. However, with <code>object-fit: cover;</code> in my image, my image is goanna move around with user resizes. How to make my div appear in the exact position when resizes happen? </p>
  
  <p>Thanks. And if my question is messy and you cannot understand, please let me know because I am not a native English speaker.</p>