Дорогие камрады!
Мнигие наверное замечали не раз, что картинки в статьях, когда читаемы с мобильника, часто вылезают за пределы экраны, лишая читающего возможности посмотреть, что же там. Это было и в старой мобильной версии, есть и в новой.
В связи с этим, хотелось бы показать вам маленький трюк, который позволит обойти эту проблему и сделает ваши статьи более наглядными и читаемыми.
Суть в том, что когда вы всталяете картинку, выставляется ее размер в пикселях. Либо автоматически, либо вручную, вами. Но мобильные девайсы, особенно телефоны, в большинстве случаев представляют себя как устройства, отображающие значительно меньшее количество этих самых точек на экране. В результате часть картинки уползает за пределы экрана и становится не видна.
Так вот, что же мы можем сделать в таком случае?
Если вы планируете, что ваша картинка будет занимать всю ширину статьи, то вместо пиксельных значений вы ставите относительные. А именно:
Width (ширина): 100%
Height (высота): auto
Второй параметр очень важен, так как иначе браузер возьмет оригинальное значение из картинки, и результатом будет кривая картинка.
Выставлять можно и меньше 100%, на усмотрение автора. Приблизить маленькую картинку всегда можно, а вот отдалить слишком большую - нет.
Надеюсь, что этот совет многим пригодится.
=)
Комментарии
О! Не знал, спасибо...
45% x auto
1+
Уже и котят нюхать стали. Брр мяу.
во всем есть смысл =))
наркотики - котики - котята =)
Барак - Бабрак - судак - налим. :)
Width (ширина): 100%
Height (высота): auto
а я не понял, где это указывать
на скрине покажите плиз
обновил пост =)
Извиняюсь. У меня скрин не виден. :(
ты лучше скажи, когда мобильный дизайн починишь :-)
после 22-го =) сейчас завал)
ты иначе обещал
да, виноват. Но просто не ожидал такой загрузки. Вот после дедлайна 22-го числа, 23-го смогу спокойно сесть и потратить целый день на допиливание. Доживем?
Фактически люди сейчас, нормальные записи делать просто не могут, а комментируя не могут нормально ссылку сделать, видео, картинки и т.д.
И все ради чего? что меню удобнее стало?
Все плюсы в новом дизайне носят нефункциональный характер, а вот минусы - ударили по функциям.
Доживем, думаю, но я не думал, что на месяц доделки затянутся, иначе бы не ставил этот дизайн пока не сделано как следует.
хорошо, если удастся выкроить время, то сделаю раньше.
просто с НГ у самого буквально еле 1 день был выходной. Висит проект еще с прошлого года + проект с дедлайном 22го
Не знаю, обсуждались ли такие косяки по m-версии АШ, но напишу:
– при переходе на статью в новой вкладке открывается не m-версия статьи;
– то же — при переходе ко второй странице комментариев в статье;
– при попытке возврата на 2-й странице комментариев к m-версии через княпочку открывается первая страница комментариев.
Если эти косяки не обсуждались — прошу простить :)
зы. Держись! Много работы — это хорошо, грустить некогда.
В новом мобильном дизайне АШ - в Опере-мини шрифт слишком крупный, а сделать масштаб меньше теперь нельзя ((
в планах сделать возможность переключения между 2-мя размерами текста.
Интересно 100*auto
выставлять можно и меньше 100%, на усмотрение автора. Приблизить маленькую картинку всегда можно, а вот отдалить слишком большую - нет.
--- добавлю в пост.
т.е. в мобильнике она не будет по ширине статьи и экрана выставляться автоматически?
если указано 100% - то будет занимать 100% ширины статьи, если 70%, то, соответственно, 70%.. и так далее. В то время как пиксельные значения жестко завязываются на ширину, сообщаемую устройством.
темный лес:) одно понял, лучше меньше, ибо можно приблизить.
ну если картинка паршивого качества, или очень большая в высоту, то да, лучше меньше, чтобы на десктопе выглядело прилично.
Давай, объясню:) Не буду углубляться ни в какие другие характеристики, кроме разрешения.
1. Картинка.
В электронном виде она состоит из определённого количества пикселей на дюйм в двух плоскостях (dpi — dot per inch, точек на дюйм). Это называется разрешением картинки.
2. Устройство просмотра картинки.
Обладает теми же характеристиками: dpi в двух плоскостях, т.е. тем же разрешением.
Если есть конфликт "непонимания" (не "авто" в настройке подачи исходной матрицы картинки устройству отображения) в подгонке одного к другому, имеем невозможность просмотра картинки целиком.
Сюда вставлю, раз техническое – с некоторых пор страницы сайта в Опере находятся в состоянии постоянной перезагрузки, но при этом содержимое не обновляется. Нажатие кнопки "стоп" не работает и, соответственно, не нажать на "перезагрузку" страницы. Перезагрузка по F5 при этом работает.
Может, и небольшой косяк, но недоделка чувствуется.
Вроде разобрался. Спасибо.
типа того))) но лучше что-нибудь с большим количеством пикселов) типа такого:
То-есть лучше брать картинки покрупнее. А траффик не будет возражать.
ну, если вставлять картинки по метру и более, то, конечно, будет. А в целом, проблем особых быть не должно, как мне кажется
Спасибо. У Вас начальная картинка1920x1080 будем считать максимум.
урок усвоен в совершенстве) давайте зачетку)
убрал запись в Блоги, уже второй человек понял так, что нужно ставить именно 100%.
http://aftershock.news/?q=comment/1409381#comment-1409381