Seo Форум

Разное => О сайте и форуме => Тема начата: Val_Ery от 14-05-2020, 09:28:10

Название: Изображения в постах
Отправлено: Val_Ery от 14-05-2020, 09:28:10
У меня есть маленькое предложение, касающееся вставки изображений в сообщения... Простой код:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Как на данный момент...
Сейчас любой пользователь может добавить в сообщение изображение, воспользовавшись кнопкой (http://www.sbup.com/seo-forum/Themes/seo_2/images/bbc/img.gif). Собственно, сам bbcode не подразумевает никакой адаптивности. В результате, если кто-то захочет вставить скриншот со своего 2К монитора (1920px), этот скриншот просто не влезет в обертку (блок с классом wrapper), размеры которой для десктопов ограничены 990px с одной стороны и 1500px с другой (без учета отступа слева в 16em). Получаем полосу прокрутки внутри сообщения... что выглядит очень "не аккуратно".

В принципе, пользователь может
 - поработать над своим изображением перед вставкой его в сообщение.
Это не всегда хорошо, особенно, если скриншотится нечто с текстом: масштабирование картинки под размер бокса для сообщения может сделать текст просто не читабельным.
 - вставить изображение в спойлер
Я сам так делаю. В результате полоса прокрутки появляется только в открытом спойлере, само сообщение аккуратненько вписывается в .postarea
 - воспользоваться предоставляемой bbcode возможностью изменить размер отображаемой картинки
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.При таком методе вставки картинок SMF разместит в сообщении изображение шириной 500px (высота будет автоматом пересчитана под новую ширину), добавит класс resized с измененным курсором + возможность просмотра полного изображения по клику. Вариант хороший, только вот bbcode не дает использовать процентные величины, только - пиксели. Что плохо для мобилок. К примеру, на моей мобилке ширина 1080 с плотностью 3. Получаем, что любое изображение, большее чем 1080 / 3 = 360px, не будет вмещаться в экран.
(нажмите чтобы показать/скрыть)

Что это даст...
При установке правила "максимальная ширина: 100%" любое изображение, ширина которого меньше ширины контейнера, будет иметь исходный размер. Если же вставляемая картинка шире родительского блока, браузер будет ее масштабировать, чтобы в этот родительский блок вместить...