?

Log in

No account? Create an account
Alex-Utah's LJ
Техническое, про ЖЖ 
4-мар-2014 12:16 pm
silverback
В одном несерьёзном тесте из 70-х годов, якобы переведённом из журнала Datamation, предлагалось выбрать один из десятка вариантов решения несложной задачки (речь шла о программировании), после чего приводились комментарии по поводу каждого из выбранных вариантов. (Может, я этот тест как-нибудь запощу, хоть он наверняка будет выглядеть архаично.) Так вот, по поводу фортранно-ориентированного кусочка кода было сказано: "Да, старую собаку не научишь новым штукам."

Это, наверное, и про меня тоже. Когда я стал пользоваться ЖЖ, мне не понравился дефолтный стиль и я, не сильно напрягаясь, выбрал себе тот, что мне по вкусу. Я к своему стилю привык и проставил птички на закладке "Вид" в "Настройках аккаунта":
Просматривать все журналы и сообщества в моем стиле
и
Читать страницы комментариев, открываемые со страницы друзей, в моем стиле

Очень удобно, правда.Но есть нюанс.

Некоторые ЖЖ-юзеры (не из нашего района! т.е., не из моей френдленты) то ли по невнимательности, то ли их пофигизма постят порой изображения, ширина которых доходит до 3-4 тысяч пикселей. Да хоть и полторы-две - лента рвётся по ширине со страшной силой, появляется горизонтальный скроллинг и читать страницу ленты с таким постом становится невозможно.

Чтобы избегать такого у себя, я не публикую изображения шире 880 пикселов, ориентируясь на свой стиль и на разрешение рабочего монитора (дома монитор 23-дюймовый, но раскрывать браузер на всю его ширину кажется мне неудобным - глаз по строчке бегает).

Не так давно наткнулся (не упомню, где) на совет: Зайти в "Настройки стиля журнала" и в поле Custom stylesheet ввести следующее:
img {
max-width: 880px;
height: auto !important;
width: auto !important;
}

Сделал и затащился: все изображения, чья ширина более 880px, масштабируются до указанного размера и лента не рвётся. Ура? Ну, почти. Оказалось, у этого способа есть побочный эффект (я пользуюсь FireFox'ом на обоих компах): если исходное изображение уже, чем 880px, и при его публикации используют масштабирование (пример: реальное изображение логотипа ПерСиба имеет размеры 807*807, но в тэге img src ему прописывают width=250, height=250) у меня отобразится реальный размер картинки, т.е. 807 на 807.

Не страшно, в общем-то. До тех пор, пока какой-нибудь хороший человек не решает запостить в ряд несколько миниатюр, которые уменьшены посредством тех же самых width= и height=, а в реальности имеет ширину, ну, скажем, 640 пикселей:



А я, как дурак, увижу три изображения рядом, каждое из которых будет иметь 640 пикселов в ширину, то есть, всего будет 1922 пиксела только на изображения, а ещё боковая панель место занимает. То есть, лента будет опять порвана по ширине. Если убрать птичку "в моём стиле", всё будет как задумано автором публикации, но меня этот способ не устраивает в силу вышеуказанных причин.

Вопрос: Можно ли с помощью таблицы стилей сделать так, чтобы этого побочного эффекта не было, то есть, если картинка шире, чем мне удобно, её бы уменьшали до нужного мне размера, а если она уже и масштабирована кем-то, то чтобы мне её показывали в масштабированном размере?

Ну, или где про это можно прочитать?

UPD: Максим Сидоров привёл очень изящное решение для публикации фотографий любого размера, при котором не рвёт ленту никому из читателей:
[div align="center"][img src="http://ссылка-на-изображение" width="95%" style="max-width:1300px"][/div]
(Ясно, что при использовании этого кусочка нужно будет заменить все квадратные скобки угловыми)

т.е., загружаемое изображение имеет ширину в 1300px, но отображаться будет уменьшенным пропорционально размеру окна браузера, без разрывания ленты:

Слонята в Пиннавелле


Comments 
4-мар-2014 08:44 am
Оставьте просто
img {
max-width: 880px;
}
И будет всем счастье :)
4-мар-2014 09:11 am - "А-а-а! Заработало!" (с) Кот Матроскин
Спасибо, получилось. :)
4-мар-2014 05:35 pm
Спасибо, что думаете о читателях своего журнала и стараетесь обеспечить им удобное чтение.

В свою очередь, абсолютно аналогичное решение есть для тех, кто хочет выложить фотографию максимально возможной ширины, но не испортить ленту ни одному из читателей. http://tobotras.livejournal.com/631445.html. Наверное, буду пользоваться этим вариантом для публикации панорам.
5-мар-2014 05:31 am
Максим, спасибо! Очень изящное решение.

Вдруг кому-то из тех, кто ленится в исходник заглянуть, тоже интересным покажется - я про это в теле записи допишу. :)
8-мар-2014 07:09 pm
(Ясно, что при использовании этого кусочка нужно будет заменить все квадратные скобки угловыми)

В общем-то, вопрос можно было и без замены составить :)
Вот так:

<div align="center"><img src="http://ссылка-на-изображение" width="95%" style="max-width:1300px"></div>
This page was loaded сент 22 2017, 9:50 am GMT.