Как сделать div отзывчивым по высоте/ширине с текстом в виде одинаковых размеров div с изображением?

Question

У меня есть сетка:

<div class="img"><img src="#" /></div> 
<div class="img"><img src="#" /></div> 
<div class="quote"><p>Lorem ipsum</p></div> 
<div class="img"><img src="#" /></div> 
<div class="quote"><p>Lorem ipsum</p></div> 
<div class="img"><img src="#" /></div> 

CSS

div { 
    width: 25%; 
} 

.img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    width: 100%; 
} 

.quote { 
    ? 
} 

В JQuery я хотел бы сделать:

var imgHeight = $(".img").height(); 
$(".quote").height(imgHeight); 

Я думал, используя поддельные IMG для .quote или Интересно, если я должен пойти jQuery для расчета размеров .img и применить их к .quote. Есть ли там какой-нибудь другой подход css, который это сделает?

Answer 1

Есть 2 решения:

JQuery

var imgHeight = $(".img").height(); 
$(".quote").height(imgHeight); 

CSS3

FlexBox layout module