CODEWITHSUNDEEP
htmlcss
dim0_0n
dim0_0n

Reputation: 2504

Parent div height not fits child image height

This is probably a very easy question, but I can't figure out how to make parent div element's height the same as the child image height.

Here is a plunkr example

<div id="parent">
    <img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>

CSS

img {
    width: 100%;
}

If you inspect parent div, then you'll find that it's height is bigger than the child image's. Thanks in advance.

Upvotes: 2

Views: 2606

Answers (3)

Chris
Chris

Reputation: 59541

Alternative 1

Set display: block on your <img>, like @Pete demonstrates. This is probably the preferred solution.

#parent {
  border: 1px solid black
}
#parent > img {
  display: block;
  width:100%;
}
<div id="parent">
  <img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>

Alternative 2

Remove white-spacing on your #parent by either setting line-height: 0 or font-size:0.

#parent {
  border: 1px solid black;
  line-height: 0;
}
<div id="parent">
  <img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>

Alternative 3

Add a negative margin. This is a rather poor solution, but I believe it's worth mentioning.

#parent {
  border: 1px solid black;
}
#parent > img {
  width:100%;
  margin-bottom: -4px;
}
<div id="parent">
  <img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>

Upvotes: 1

Omeiza
Omeiza

Reputation: 111

Just like Pete said. Add display:block to your #parent > img. Img is an inline-block element by default.

Upvotes: 1

Pete
Pete

Reputation: 58462

You need to give the image a style of display:block otherwise you will get the gap at the bottom:

#parent {
  border: 1px solid black
}
#parent > img {
  display: block;
  width:100%;
}
<div id="parent">
  <img src="http://pad1.whstatic.com/images/thumb/3/3d/Become-a-Ghost-Step-5.jpg/aid2076316-728px-Become-a-Ghost-Step-5.jpg">
</div>

Upvotes: 6

Related Questions