Выровнить картинку в блоке по низу

Есть небольшой код:

.pr_pic {

  height:107px;

  position:relative;

  vertical-align:bottom;

}

<div class="recom">

  <div class="pr_pic"><img src="_pics/gabriella_rocha_samira.jpg" alt="Gabriella Rocha Samira" /></div>

  <p><a href="#" title="Gabriella Rocha Samira">Gabriella<br />Rocha Samira</a><br /><span class="price">2870 руб.</span></p>

</div>

Задача проста, выровнить картинку по нижней границе блока. Высота блока фиксирована, размеры картинок разные.
Помогите сделать.

Img - это inline элемент, и свойство vertical-align выравнивает его относительно строки, а никак не блока.

Позиционировать img ро высоте, как inline, можно с помощью подбора значений line-height и vertical-align.

Можно img сделать и блочным (Если вера позволяет ) - display:block, и позиционировать абсолютно, или подобрать margin-ы.