Perfectly rectangular DIV wrapper in CSS [duplicate]

Solution for Perfectly rectangular DIV wrapper in CSS [duplicate]
is Given Below:

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 128×132 px (+padding) instead of 128×128 px as it only wraps that 128×128 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!

.wrapper{
  background-color: red;
  width: fit-content;
  height: fit-content;
  padding: 30px;
  display: flex;
}
<div class="wrapper">
  <img src="https://cdn2.iconfinder.com/data/icons/bitsies/128/Magnifier-128.png" />
  
</div>