Как лучше верстать резиновую карточку товара?

[black_c]

Страница с каталогом туров в виде карточек, фоном на всю карточку идет изображение. 
На мобильных карточки располагаются друг под другом и до планшета должны тянуться. 
Как сделать так, чтобы при увеличении окна эти карточки растягивались пропорционально по ширине и высоте. Если изображение сделать фоном, то при изменении области просмотра карточки растягиваются только по ширине, что некрасиво, вставлять изображение через тег img тоже не то.

То есть, по сути, нужно, чтобы первоначальные пропорции контейнера сохранялись при увеличении окна от мобильного представления до планшетного. Я так понимаю, тут не обойтись без javascript?

[klierik]

.product-card {
    position:relative;
    padding-top:100%;
}