Как бороться с широкими фотографиями в френдленте
Расскажу про еще один источник моих страданий, имевший место довольно продолжительное время. Но здесь удалось найти рецепт, которым и поделюсь с вами - возможно, кому-то он пригодится. Помните, я как-то спрашивала у вас о том, какая разрешающая способность ваших мониторов? Вопрос был связан с тем, что в френдленте стало очень много фотографий большого размера, которые в мой монитор не умещались (речь идет о фотографиях свыше 900 рх по ширине). И ладно бы они сами, а то и текст уплывал за пределы экрана из-за них. Помучившись с горизонтальным скроллингом при чтении френдленты и почти заработав себе т.н. туннельно-карпальный синдром - это когда запястье болит так, что мешает спать, стала думать, что с этим можно сделать... Под катом увидите все способы, которые я обдумывала не один месяц.
У меня разрешение монитора 1024 рх по ширине. Первое, что я сделала еще несколько лет назад - переставила в оформлении своего журнала колонку с тегами вправо. Это позволило с минимальными потерями видеть фото до 900 рх шириной.
Поскольку я каждый день имею дело с огромными объемами информации, уменьшить их количество или отключать картинки не получается.
Увеличить разрешение своего монитора - получается слишком мелкий шрифт. Если же поменять размер шрифта по умолчанию в системе, то он местами увеличивается, а местами нет. Масштабировать шрифт в самом броузере - лишние щелчки мышью и снова привет синдрому компьютерщиков.
Пару раз просила людей спрятать широкие картинки под кат. Бесполезно - все равно потом забывают и постят дальше все более и более широкие фото.
С другой стороны, не все же имеют мониторы сравнимые с телевизорами. В чем же дело? Как они могут смотреть такие широкие фото? Как мне подсказал один специалист, мониторы последнего времени имеют большую плотность пикселов на единицу своей площади. Поэтому на 19-дюймовом мониторе можно видеть изображения более 1600 рх шириной.
Что же делать? Покупать новый монитор? Когда я посчитала, во сколько мне обойдется такой, появилось желание попросить любителей сверхшироких фото купить мне его. Это шутка. :-)) Но, честно говоря, зачем мне покупать новый, если старый монитор отлично служит во всех остальных случаях?
И когда я уже вконец отчаялась, не в силах придумать решение проблемы, появился такой пост: http://novichok.livejournal.com/2571793.html
Сначала я его процитирую, а потом дополню своим комментарием.
Хитрости отображения картинок в ленте друзей ЖЖ
Если вы - как я - читаете ленту друзей со множеством фотографий и, разумеется, в стиле своего дневника, то возможно вам попадались картинки, ну, очень-очень большого размера.
Мне встречались такие, которые превышали размер моего выше среднего экрана в несколько раз. Разумеется, для начала я материл авторов и думал их расфрендить: безлимитного трафика мне не жалко, но восприятие ленты портилось напрочь.
Однако дорожа хорошими людьми - других не держим - решил изучить вопрос и обнаружил, что у них в дневниках их действительно огромные картинки - что-нибудь 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-ой версии.
Я попробовала этот способ. В итоге сделала так:
img {
max-width: 800px;
}
- без
height: auto !important;
width: auto !important;
Потому что иначе у меня пропадает выравнивание превьюшек фотографий в одну линию. Например, в этом посте: http://renatar.livejournal.com/500121.html - там четыре верхние картинки разного размера, и я их в посте "растягивала" через height и width так, чтобы они были одинаковые по размеру, а с auto !important; получался не ровный ряд, а грабли с зубьями какими-то, т.к. стали отображаться их реальные размеры. Когда поставила просто max-width: 800px; - все стало нормально.
Только если фотографии постятся обычным способом, их пропорции при уменьшении сохраняются. Если же применяются какие-то хитроумные способы, вроде как у carmelist, то его фото "схлопываются" по ширине, оставаясь со старой высотой. И вместо благородных кругов на фото получаются овалы. Но таких фото у меня в ленте немного.
Так что все фото теперь могу видеть не шире 800 рх и это радует. Теперь надо придумать, что с широкими видеороликами делать.
И себе я запретила над катом ставить фото шире, чем 500 рх, хотя порой и хочется выставить 800. Не хочу, чтобы из-за меня кто-то страдал и мучился с больной рукой.
У меня разрешение монитора 1024 рх по ширине. Первое, что я сделала еще несколько лет назад - переставила в оформлении своего журнала колонку с тегами вправо. Это позволило с минимальными потерями видеть фото до 900 рх шириной.
Поскольку я каждый день имею дело с огромными объемами информации, уменьшить их количество или отключать картинки не получается.
Увеличить разрешение своего монитора - получается слишком мелкий шрифт. Если же поменять размер шрифта по умолчанию в системе, то он местами увеличивается, а местами нет. Масштабировать шрифт в самом броузере - лишние щелчки мышью и снова привет синдрому компьютерщиков.
Пару раз просила людей спрятать широкие картинки под кат. Бесполезно - все равно потом забывают и постят дальше все более и более широкие фото.
С другой стороны, не все же имеют мониторы сравнимые с телевизорами. В чем же дело? Как они могут смотреть такие широкие фото? Как мне подсказал один специалист, мониторы последнего времени имеют большую плотность пикселов на единицу своей площади. Поэтому на 19-дюймовом мониторе можно видеть изображения более 1600 рх шириной.
Что же делать? Покупать новый монитор? Когда я посчитала, во сколько мне обойдется такой, появилось желание попросить любителей сверхшироких фото купить мне его. Это шутка. :-)) Но, честно говоря, зачем мне покупать новый, если старый монитор отлично служит во всех остальных случаях?
И когда я уже вконец отчаялась, не в силах придумать решение проблемы, появился такой пост: http://novichok.livejournal.com/2571793.html
Сначала я его процитирую, а потом дополню своим комментарием.
Хитрости отображения картинок в ленте друзей ЖЖ
Если вы - как я - читаете ленту друзей со множеством фотографий и, разумеется, в стиле своего дневника, то возможно вам попадались картинки, ну, очень-очень большого размера.
Мне встречались такие, которые превышали размер моего выше среднего экрана в несколько раз. Разумеется, для начала я материл авторов и думал их расфрендить: безлимитного трафика мне не жалко, но восприятие ленты портилось напрочь.
Однако дорожа хорошими людьми - других не держим - решил изучить вопрос и обнаружил, что у них в дневниках их действительно огромные картинки - что-нибудь 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-ой версии.
Я попробовала этот способ. В итоге сделала так:
img {
max-width: 800px;
}
- без
height: auto !important;
width: auto !important;
Потому что иначе у меня пропадает выравнивание превьюшек фотографий в одну линию. Например, в этом посте: http://renatar.livejournal.com/500121.html - там четыре верхние картинки разного размера, и я их в посте "растягивала" через height и width так, чтобы они были одинаковые по размеру, а с auto !important; получался не ровный ряд, а грабли с зубьями какими-то, т.к. стали отображаться их реальные размеры. Когда поставила просто max-width: 800px; - все стало нормально.
Только если фотографии постятся обычным способом, их пропорции при уменьшении сохраняются. Если же применяются какие-то хитроумные способы, вроде как у carmelist, то его фото "схлопываются" по ширине, оставаясь со старой высотой. И вместо благородных кругов на фото получаются овалы. Но таких фото у меня в ленте немного.
Так что все фото теперь могу видеть не шире 800 рх и это радует. Теперь надо придумать, что с широкими видеороликами делать.
И себе я запретила над катом ставить фото шире, чем 500 рх, хотя порой и хочется выставить 800. Не хочу, чтобы из-за меня кто-то страдал и мучился с больной рукой.