DIV под свою ширину ресайзит фото, а фото по своей высоте ресайзит DIV?

Question

[Sharapov]

Резиновая сетка товаров из трёх колонок. Фото будут разных размеров и пропорций.
Товар состоит из двух дивов: div.grid_photo (жёлтый) и div.grid_description (зелёный)

Есть ли способ сделать без JS так, чтобы:
Фото пропорционально ресайзилось под ширину жёлтого дива (div.grid_photo),
а жёлтый див принимал высоту этого фото, и сдвигал вниз зеленый див описания (div.grid_description)?

Код онлайн:
jsfiddle — https://jsfiddle.net/yqa0orLe/
codepen — https://codepen.io/anon/pen/YWoyLw

Answer 1

[Андрей Верх]

Не очень понял, в чём загвоздка?

.grid_photo img {vertical-align: top; width: 100%; height:auto !important;}

Comments

[Sharapov]

Спасибо!!! Работает! )

Answer 2

[Павел Гришин]

возможно я туплю и не понимаю вопроса.
Но :
img => width = 100%
grid_1 => убрать фиксированную высоту

Собственно всё.
P.S. чтоб убрать полоску у жёлтого дива (grid_photo) img => vertical-align: middle;