2

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!

Petr Marek
  • 435
  • 3
  • 11

1 Answers1

0

.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>
Mhmdrz_A
  • 4,311
  • 3
  • 14
  • 32