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
  • 595
  • 5
  • 19

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>
Mechanic
  • 5,015
  • 4
  • 15
  • 38