Same inner div image height as the outer

Question

My inner image should have the same height as the outer div.

My code is:

<div>
   <div class="col_2_fifth">
      <figure>
         <img src="....." />
      </figure>
   </div>
   <div class="col_3_fifth">
      <div class="description">
          <p>....</p>
      </div>
   </div>
</div>

But the image height is always less than its parent div height.

What can i do now? Can i fix this with jquery/js or with css?

this question already have an answer here http://stackoverflow.com/a/19193308/4323504 — Luthando Ntsekwa, Apr 23 '15 at 06:40
possible duplicate of [Resize image to 100% height of a div and keep aspect ratio](http://stackoverflow.com/questions/2646740/resize-image-to-100-height-of-a-div-and-keep-aspect-ratio) — Stephan Weinhold, Apr 23 '15 at 06:43

score 0 · Answer 1 · answered Apr 23 '15 at 06:39

0

simply write:

figure img {height:100%:}

answered Apr 23 '15 at 06:39

Richa

4,240
5
33
50

1

it doesnt cause any effect – Musa Muaz Apr 23 '15 at 06:40
check in firebug if your `
` tag is taking height or not.. if not then give height first.
– Richa Apr 23 '15 at 06:41
when you say "height as the outer", then which outer you are targeting exactly? – Richa Apr 23 '15 at 06:45

score 0 · Answer 2 · answered Apr 23 '15 at 06:39

<div>
   <div class="col_2_fifth" style='width:20%'>
      <figure>
         <img src="123.jpg-17eqp8a.jpg" width='100%' />
      </figure>
   </div>
   <div class="col_3_fifth">
      <div class="description">
          <p>....</p>
      </div>
   </div>
</div>

try this

score 0 · Answer 3 · answered Apr 23 '15 at 06:39

0

You may add

img {
  vertical-align: top;
}

answered Apr 23 '15 at 06:39

marsh

1,431
1
13
19

score 0 · Answer 4 · edited Apr 23 '15 at 07:01

0

Try editing the css file responsible for the col_2_fifth and col_3_fifth. That will help you in resolving the issue.

edited Apr 23 '15 at 07:01

Konrad Krakowiak

12,285
11
58
45

answered Apr 23 '15 at 06:40

shravan

11
4

score 0 · Answer 5 · answered Apr 23 '15 at 06:45

0

.col_2_fifth {
padding : 0px;
margin: 0px;
}

Try this.

answered Apr 23 '15 at 06:45

Pratik

1,122
8
26

score 0 · Answer 6 · answered Apr 23 '15 at 06:45

0

Try with CSS:

 .col_2_fifth {
      background: url(123.jpg-17eqp8a.jpg);
      background-size: 100% 100%;
 }

This wil set the image as background for the div with the class col_2_fifth

link in comment from Luthando Loot is best solution

answered Apr 23 '15 at 06:45

Ignotus

301
1
10

score 0 · Answer 7 · answered Apr 23 '15 at 07:19

0

This should work:

.col_2_fifth, figure, figure img {
    padding: 0;
    margin: 0;
}

.col_2_fifth, figure img {
    height: 100%;
}

answered Apr 23 '15 at 07:19

Sindre Bøyum

35
5

Same inner div image height as the outer

7 Answers7