Вход на сайт

МЕДИАМЕТРИКА

Облако тегов

Техническое - авторам: Картинки в статьях

Аватар пользователя njoy

Дорогие камрады!

Мнигие наверное замечали не раз, что картинки в статьях, когда читаемы с мобильника, часто вылезают за пределы экраны, лишая читающего возможности посмотреть, что же там. Это было и в старой мобильной версии, есть и в новой.

В связи с этим, хотелось бы показать вам маленький трюк, который позволит обойти эту проблему и сделает ваши статьи более наглядными и читаемыми.

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

Так вот, что же мы можем сделать в таком случае?

Если вы планируете, что ваша картинка будет занимать всю ширину статьи, то вместо пиксельных значений вы ставите относительные. А именно:

Width (ширина): 100%

Height (высота): auto



Второй параметр очень важен, так как иначе браузер возьмет оригинальное значение из картинки, и результатом будет кривая картинка.

Выставлять можно и меньше 100%, на усмотрение автора. Приблизить маленькую картинку всегда можно, а вот отдалить слишком большую - нет.

Надеюсь, что этот совет многим пригодится.

=)

Фонд поддержки авторов AfterShock

Комментарии

Аватар пользователя mrmypp
mrmypp(4 года 9 месяцев)(17:43:59 / 12-01-2015)

О! Не знал, спасибо...

45% x auto

Аватар пользователя Xexen
Xexen(3 года 11 месяцев)(17:47:00 / 12-01-2015)

1+

Комментарий администрации:  
*** Мистер "Сомнительная Копипаста" ***
Аватар пользователя PIPL
PIPL(3 года 11 месяцев)(17:49:09 / 12-01-2015)

Уже и котят нюхать стали. Брр мяу.

Аватар пользователя njoy
njoy(3 года 1 месяц)(18:01:35 / 12-01-2015)

во всем есть смысл =))

наркотики - котики - котята =)

Аватар пользователя PIPL
PIPL(3 года 11 месяцев)(18:08:28 / 12-01-2015)

Барак - Бабрак - судак - налим. :)

Аватар пользователя GreenWood
GreenWood(3 года 11 месяцев)(18:17:33 / 12-01-2015)

Если вы планируете, что ваша картинка будет занимать всю ширину статьи, то вместо пиксельных значений вы ставите относительные. А именно:

Width (ширина): 100%

Height (высота): auto


а я не понял, где это указывать

на скрине покажите плиз

Аватар пользователя njoy
njoy(3 года 1 месяц)(18:21:41 / 12-01-2015)

обновил пост =)

Аватар пользователя PIPL
PIPL(3 года 11 месяцев)(23:49:30 / 12-01-2015)

Извиняюсь. У меня скрин не виден. :(

Аватар пользователя GreenWood
GreenWood(3 года 11 месяцев)(18:53:24 / 12-01-2015)
спасибо не знал, что в таком формате можно вписывать размеры
Аватар пользователя alexsword
alexsword(6 лет 1 месяц)(19:01:33 / 12-01-2015)

ты лучше скажи, когда мобильный дизайн починишь :-)

Аватар пользователя njoy
njoy(3 года 1 месяц)(19:04:28 / 12-01-2015)

после 22-го =) сейчас завал)

Аватар пользователя alexsword
alexsword(6 лет 1 месяц)(19:06:29 / 12-01-2015)

ты иначе обещал

Аватар пользователя njoy
njoy(3 года 1 месяц)(19:09:08 / 12-01-2015)

да, виноват. Но просто не ожидал такой загрузки. Вот после дедлайна 22-го числа, 23-го смогу спокойно сесть и потратить целый день на допиливание. Доживем?

Аватар пользователя alexsword
alexsword(6 лет 1 месяц)(19:13:19 / 12-01-2015)

Фактически люди сейчас, нормальные записи делать просто не могут, а комментируя не могут нормально ссылку сделать, видео, картинки и т.д.

И все ради чего?  что меню удобнее стало?

Все плюсы в новом дизайне носят нефункциональный характер, а вот минусы - ударили по функциям.


Доживем, думаю, но я не думал, что на месяц доделки затянутся, иначе бы не ставил этот дизайн пока не сделано как следует.

Аватар пользователя njoy
njoy(3 года 1 месяц)(19:17:11 / 12-01-2015)

хорошо, если удастся выкроить время, то сделаю раньше.

просто с НГ у самого буквально еле 1 день был выходной. Висит проект еще с прошлого года + проект с дедлайном 22го

Аватар пользователя Larikol
Larikol(4 года 9 месяцев)(19:52:32 / 13-01-2015)

Не знаю, обсуждались ли такие косяки по m-версии АШ, но напишу:

– при переходе на статью в новой вкладке открывается не m-версия статьи;
– то же — при переходе ко второй странице комментариев в статье;
– при попытке возврата на 2-й странице комментариев к m-версии через княпочку открывается первая страница комментариев.

Если эти косяки не обсуждались — прошу простить :)

зы. Держись! Много работы — это хорошо, грустить некогда.

Аватар пользователя Larikol
Larikol(4 года 9 месяцев)(22:41:39 / 13-01-2015)
Ничёсе! Всё уже работает:)
Аватар пользователя Larikol
Larikol(4 года 9 месяцев)(23:16:57 / 13-01-2015)
Опять не работает.
Аватар пользователя njoy
njoy(3 года 1 месяц)(23:56:34 / 13-01-2015)
я тут не при чем)) и сделать особо не могу ничего - это даже скорее не вопросы движка, а вопросы вашего браузера, так как лично я вот вашу проблему у себя смоделировать не смог. Мне кажется, что при открытии новой вкладки ваш браузер запрашивает настольную версию, т е в нем изначально стоит преференция грузить десктоп, и поэтому вылезает такая штука. могу быть не прав, это лишь мое мнение.
Аватар пользователя Larikol
Larikol(4 года 9 месяцев)(21:05:25 / 14-01-2015)
А мне - не кажется :) Опять всё работает. Хрень какая-то, которую я периодически наблюдаю, поэтому и написал.
Аватар пользователя zhelezo
zhelezo(3 года 1 месяц)(19:06:16 / 12-01-2015)

В новом мобильном дизайне АШ - в Опере-мини шрифт слишком крупный, а сделать масштаб меньше теперь нельзя ((

Аватар пользователя njoy
njoy(3 года 1 месяц)(19:11:18 / 12-01-2015)

в планах сделать возможность переключения между 2-мя размерами текста.

Аватар пользователя SKY
SKY(5 лет 7 месяцев)(19:32:43 / 12-01-2015)

Интересно 100*auto

Аватар пользователя njoy
njoy(3 года 1 месяц)(19:35:08 / 12-01-2015)

выставлять можно и меньше 100%, на усмотрение автора. Приблизить маленькую картинку всегда можно, а вот отдалить слишком большую - нет.

--- добавлю в пост.

Аватар пользователя SKY
SKY(5 лет 7 месяцев)(19:37:04 / 12-01-2015)

т.е. в мобильнике она не будет по ширине статьи и экрана выставляться автоматически?

Аватар пользователя njoy
njoy(3 года 1 месяц)(19:39:26 / 12-01-2015)

если указано 100% - то будет занимать 100% ширины статьи, если 70%, то, соответственно, 70%.. и так далее. В то время как пиксельные значения жестко завязываются на ширину, сообщаемую устройством.

Аватар пользователя SKY
SKY(5 лет 7 месяцев)(19:41:13 / 12-01-2015)

темный лес:) одно понял, лучше меньше, ибо можно приблизить.

Аватар пользователя njoy
njoy(3 года 1 месяц)(19:43:16 / 12-01-2015)

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

Аватар пользователя Larikol
Larikol(4 года 9 месяцев)(20:25:37 / 13-01-2015)

Давай, объясню:) Не буду углубляться ни в какие другие характеристики, кроме разрешения.

1. Картинка.
В электронном виде она состоит из определённого количества пикселей на дюйм в двух плоскостях (dpi — dot per inch, точек на дюйм). Это называется разрешением картинки.

2. Устройство просмотра картинки.
Обладает теми же характеристиками: dpi в двух плоскостях, т.е. тем же разрешением.

Если есть конфликт "непонимания" (не "авто" в настройке подачи исходной матрицы картинки устройству отображения) в подгонке одного к другому, имеем невозможность просмотра картинки целиком.

Аватар пользователя Бой Курантов

Сюда вставлю, раз техническое – с некоторых пор страницы сайта в Опере находятся в состоянии постоянной перезагрузки, но при этом содержимое не обновляется. Нажатие кнопки "стоп" не работает и, соответственно, не нажать на "перезагрузку" страницы. Перезагрузка по F5 при этом работает.

Может, и небольшой косяк, но недоделка чувствуется.

Аватар пользователя PIPL
PIPL(3 года 11 месяцев)(23:57:19 / 12-01-2015)

Вроде разобрался. Спасибо.

Аватар пользователя PIPL
PIPL(3 года 11 месяцев)(00:00:00 / 13-01-2015)

Аватар пользователя njoy
njoy(3 года 1 месяц)(00:05:01 / 13-01-2015)

типа того))) но лучше что-нибудь с большим количеством пикселов) типа такого:

Аватар пользователя PIPL
PIPL(3 года 11 месяцев)(00:10:34 / 13-01-2015)

То-есть лучше брать картинки покрупнее. А траффик не будет возражать.

Аватар пользователя njoy
njoy(3 года 1 месяц)(01:31:14 / 13-01-2015)

ну, если вставлять картинки по метру и более, то,  конечно, будет. А в целом, проблем особых быть не должно, как мне кажется

Аватар пользователя PIPL
PIPL(3 года 11 месяцев)(01:46:53 / 13-01-2015)

Спасибо. У Вас начальная картинка1920x1080 будем считать максимум.

Аватар пользователя PIPL
PIPL(3 года 11 месяцев)(00:05:17 / 13-01-2015)

Аватар пользователя njoy
njoy(3 года 1 месяц)(00:09:09 / 13-01-2015)

урок усвоен в совершенстве) давайте зачетку)

Аватар пользователя alexsword
alexsword(6 лет 1 месяц)(09:29:53 / 13-01-2015)

убрал запись в Блоги, уже второй человек понял так, что нужно ставить именно 100%.

http://aftershock.news/?q=comment/1409381#comment-1409381

Лидеры обсуждений

за 4 часаза суткиза неделю

Лидеры просмотров

за неделюза месяцза год

СМИ

Загрузка...