Как сделать одинаковые картинки в похожих новостях и топе DLE 9.4

вопрос

На сайте в коротких новостях используются маленькие картинки, поэтому они довольно легко подходят и для вывода в качестве картинок в похожие новости (и topnews)
Код такой:

<li>
    <div class="f_left"><img src="{image-1}" alt="{title}"/></div>
    <div>
        <a href="{link}">{title}</a>
        <p>{text limit="150"}</p>
    </div>
</li>

CSS

.relatednews ul li {
    padding: 5px;   
    cursor: pointer;
    overflow: hidden;
    } 
    .relatednews ul li .f_left {   
        float: left;
        width: 50px;
        height: 50px;
        overflow: hidden;
        margin: 3px 10px 0 0;  
        }   
        .relatednews ul li .f_left img {
            max-width: 50px;
            max-height: 50px;
            }

Всё хорошо, но вот если картинка имеет сильную разницу в соотношении сторон например 50x100px или 100x50px выглядит такая картинка ужасающе)))
опять же, если задавать только высоту или ширину то эти же картинки выглядят так же не оч привлекательно.

Как же сделать так, чтоб все картинки были пропорционально обрезаны, если они имеют резмер, больше заданного?

Ответил: ПафНутиЙ

из CSS удаляем

        .relatednews ul li .f_left img {
            max-width: 50px;
            max-height: 50px;
            }

А в js пишем:

$(function () {
    $(window).load(function() {
        $(".relatednews img").each(function () {
            relImg = $(this).attr("src");
            relImgH = $(this).attr("height");
            relImgW = $(this).attr("width");
            if(relImg == ""){
                $(this).parent().hide(1000);
            }
            if(relImgH > relImgW) {
                $(this).attr("width","50");
            } else {
                $(this).attr("height","50");
            }
        });
    });
});

Этот скрипт вычисляет высоту и ширину картинки и если ширина больше высоты, то ограничивает ширину, если нет - ограничивает высоту.
Так же если картинки в новости нет - он просто спрячет блок с картинкой с глаз долой)))

Минусы:
- Нет проверки, если размер одной из сторон меньше 50px;
- Скрипт начинает работать , когда загружены все картинки (иначе в некоторых случаях некорректно происходит обработка в Opera и Chrome старых версий)