Похожие новости с картинками. Горизонтальное расположение. Как?

Добрый день. Народ, я не очень силен в css и т.д. прошу вашей помощи. Вот код моих relatednews.tpl и style.css:

<div class="relatednews">
<a href="{link}"><img class="imagestory" src="{image-1}" alt="{title}"/><br/>{title}</a>
</div>

/*Related News*/
.relatednews{display:inline-block; width:25%; vertical-align:top; }
.relatednews img{width:170px; height:170px;}

Сейчас в похожих новостях картинки и заголовки новостей отображаются горизонтально НО:
а) картинки имеют не правильные пропорции (тоесть они заточены под высоту, и изображения HD (1280х720 к примеру) отображаются очень зжато, в пропорциях 3:3 и хуже.
б) картинки налазят друг на друга.

Камнями прошу сильно не бросаться, перепробовал все, что можно.... менял width:170px; height:170px на другие значения, но новости то уродуются еще больше, то становятся опять по вертикали.

Собственно, вот вопрос:
Как сделать правильное горизонтальное расположение похожих новостей с картинками, чтобы изображения не налазили друг на друга и имели правильные пропорции?
Нарисовал схему, что я имею в виду. (Да я пейинтмастер:)) )