Хитрости отображения картинок в ленте друзей ЖЖ

[edkin]

Если вы - как я - читаете ленту друзей со множеством фотографий и, разумеется, в стиле своего дневника, то возможно вам попадались картинки, ну, очень-очень большого размера.
Мне встречались такие, которые превышали размер моего выше среднего экрана в несколько раз. Разумеется, для начала я материл авторов и думал их разфрендить: безлимитного трафика мне не жалко, но восприятие ленты портилось напрочь.
Однако дорожа хорошими людьми - других не держим - решил изучить вопрос и обнаружил, что у них в дневниках их действительно огромные картинки - что-нибудь 2500х4000px (пикселей) - отображались вполне себе скромно: не резались и не вылазили за отведенные им поля.


Изучив их дизайн, нашел решение: в настройки стиля CSS (http://www.livejournal.com/customize/options.bml?group=customcss, поле Custom stylesheet - волшебная штука, кстати: касаемо рисунков, там я задаю для своего дневника отбрасывание от них тени и круглые уголки) нужно вставить следующий код, например, в начало или в конец, главное не внутрь скобок {} уже существующего стиля:

img {
max-width: 100%;
height: auto !important;
width: auto !important;
}

Все, картинки будут помещаться в стиль вашего существующего дизайна.
Но, признаться, сам я нередко размещаю снимки, особенно пейзажи, чуть больше моего дизайна, который я уже и так расширял. Лишь бы за монитор не вылазили!
В этом случае можно вместо 100% задать необходимую ширину, например 900px:

img {
max-width: 900px;
height: auto !important;
width: auto !important;
}

или ограничиться уменьшением размера лишь тех картинок, что вставлены без явного указания размера, полагаясь на благоразумие френдов:

img:not([width]):not([height]):not([style*="height"]) {
max-width: 100%;
height: auto !important;
width: auto !important;
}

или сочетать оба последних способа.

Добавить следует только одно: тормознутый ослик IE поддерживает свойство max-width начиная лишь с 8-ой версии.