Perfectly rectangular DIV wrapper in CSS [duplicate]

How can I make div image wrapper, which will be rectangular? It must have same width and height, but without setting it... Here is what I have:

.wrapper{
  background-color: red;
  width: fit-content;
  height: fit-content;
  padding: 30px;
  
}

<div class="wrapper">
  <img src="https://cdn2.iconfinder.com/data/icons/bitsies/128/Magnifier-128.png" />
  
</div>

If you inspect that "wrapper" div in devtools, you will see, that it has dimensions 128x132 px (+padding) instead of 128x128 px as it only wraps that 128x128 px image. Why it adds 4px on height and how can I get rid of it? I need perfectly rectangular wrapper and I don't want to manually set dimensions or use Javascript...

Thanks!

from Recent Questions - Stack Overflow https://ift.tt/3fgMIMW
https://ift.tt/eA8V8J