Та же внутренняя высота изображения div, что и внешняя

Question

Мое внутреннее изображение должно иметь ту же высоту, что и внешний div.

Мой код:

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

Но высота изображения всегда меньше, чем его высота родительского Div.

Что я могу сделать сейчас? Могу ли я исправить это с помощью jquery/js или css?

Answer 1

просто написать:

figure img {height:100%:} 

Answer 2

<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> 

попробовать это

Answer 3

Вы можете добавить

img { 
    vertical-align: top; 
} 

Answer 4

Попробуйте изменить файл CSS, ответственный за col_2_fifth и col_3_fifth. Это поможет вам в решении этой проблемы.

Answer 5

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

Попробуйте это.

Answer 6

Попробуйте с помощью CSS:

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

Это Виль установить изображение в качестве фона для DIV с классом col_2_fifth

ссылка на комментарий от Luthando Loot является лучшим решением

Answer 7

Это должно работать:

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

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