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

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

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

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

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

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

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

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

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

Height (высота): auto



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

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

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

=)

Комментарии

Аватар пользователя mrmypp
mrmypp(11 лет 1 месяц)

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

45% x auto

Аватар пользователя Xexen
Xexen(10 лет 3 месяца)

1+

Комментарий администрации:  
*** Мистер "Сомнительная Копипаста" ***
Аватар пользователя PIPL
PIPL(10 лет 3 месяца)

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

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

Аватар пользователя PIPL
PIPL(10 лет 3 месяца)

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

Аватар пользователя GreenWood
GreenWood(10 лет 3 месяца)

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

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

Height (высота): auto


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

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя PIPL
PIPL(10 лет 3 месяца)

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

Аватар пользователя GreenWood
GreenWood(10 лет 3 месяца)
спасибо не знал, что в таком формате можно вписывать размеры
Аватар пользователя alexsword
alexsword(12 лет 5 месяцев)

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя alexsword
alexsword(12 лет 5 месяцев)

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя alexsword
alexsword(12 лет 5 месяцев)

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

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

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


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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

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

Аватар пользователя Larikol
Larikol(11 лет 1 месяц)

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

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

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

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

Аватар пользователя Larikol
Larikol(11 лет 1 месяц)
Ничёсе! Всё уже работает:)
Аватар пользователя Larikol
Larikol(11 лет 1 месяц)
Опять не работает.
Аватар пользователя njoy
njoy(9 лет 5 месяцев)
я тут не при чем)) и сделать особо не могу ничего - это даже скорее не вопросы движка, а вопросы вашего браузера, так как лично я вот вашу проблему у себя смоделировать не смог. Мне кажется, что при открытии новой вкладки ваш браузер запрашивает настольную версию, т е в нем изначально стоит преференция грузить десктоп, и поэтому вылезает такая штука. могу быть не прав, это лишь мое мнение.
Аватар пользователя Larikol
Larikol(11 лет 1 месяц)
А мне - не кажется :) Опять всё работает. Хрень какая-то, которую я периодически наблюдаю, поэтому и написал.
Аватар пользователя zhelezo
zhelezo(9 лет 6 месяцев)

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя SKY
SKY(11 лет 11 месяцев)

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

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

Аватар пользователя SKY
SKY(11 лет 11 месяцев)

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя SKY
SKY(11 лет 11 месяцев)

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя Larikol
Larikol(11 лет 1 месяц)

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

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

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

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

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

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

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

Аватар пользователя PIPL
PIPL(10 лет 3 месяца)

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

Аватар пользователя PIPL
PIPL(10 лет 3 месяца)

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя PIPL
PIPL(10 лет 3 месяца)

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

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя PIPL
PIPL(10 лет 3 месяца)

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

Аватар пользователя PIPL
PIPL(10 лет 3 месяца)

Аватар пользователя njoy
njoy(9 лет 5 месяцев)

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

Аватар пользователя alexsword
alexsword(12 лет 5 месяцев)

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

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