Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Как сделать одинаковые картинки в похожих новостях и топе DLE 9.4

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


     19.11.2011    Общие вопросы по вёрстке    3058

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




 CSS


Всё хорошо, но вот если картинка имеет сильную разницу в соотношении сторон например 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 старых версий)
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы