CSS: make parent div exactly (in pixels) the same height as child

Question

I have a <div> containing child <img> element:

<div class="wrapperdiv">
  <img src="blob" class="myimg">
</div>

Now, I want the <div> to have the same height as <img>.

More elaborately, my goal is to have div with img inside to have exactly the same position as if there was only img without wrapper div!

I've tried setting height: auto to the <div>, but while it sets the height to roughly same as <img>, it is larger by 1 pixel, and I'd like them to absolutely equal.

display: block for the image and no height for the div – Fabrizio Calderan Jan 20 '20 at 13:01 — Fabrizio Calderan, Jan 20 '20 at 13:01

score 2 · Answer 1 · answered Jan 20 '20 at 13:06

2

set css :

.myimg { display: block ;}

and

.wrapperdiv { height: unset;}

answered Jan 20 '20 at 13:06

Dinshaw Raje

933
1
12
33

Why height:unset instead of height:auto? – Sfili_81 Jan 20 '20 at 13:10
Just another method -- makes sure not to inherit any sizing from a parent element. So just a different way that works. – Jeff Clayton Jan 20 '20 at 13:24

score 2 · Accepted Answer · answered Jan 20 '20 at 13:14

2

@Justin Trevein, I have prepared one working demo on the basis of comment provided by @fcalderan. I hope this will be helpful.

This DEMO is related to show only Height, and not a width.

.wrapperdiv {
  background-color: green;
}

.wrapperdiv img {
  display: block;
}

<div class="wrapperdiv">
  <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" class="myimg"/>
</div>

Thanks, Jignesh Raval

answered Jan 20 '20 at 13:14

Jignesh Raval

587
7
15

Thanks, switching img display to block (and accounting for related changes) did the thing. – Justin Trevein Jan 20 '20 at 13:57

CSS: make parent div exactly (in pixels) the same height as child

2 Answers2