Изображения в постах

Автор Тема: Изображения в постах  (Прочитано 129 раз)

Оффлайн Val_EryАвтор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 59
  • Сообщений: 113
  • Карма: 11

Оффлайн Val_EryАвтор темы

  • Постоялец
  • ***
Изображения в постах
« : 14-05-2020, 09:28:10 »
У меня есть маленькое предложение, касающееся вставки изображений в сообщения... Простой код:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Как на данный момент...
Сейчас любой пользователь может добавить в сообщение изображение, воспользовавшись кнопкой . Собственно, сам bbcode не подразумевает никакой адаптивности. В результате, если кто-то захочет вставить скриншот со своего 2К монитора (1920px), этот скриншот просто не влезет в обертку (блок с классом wrapper), размеры которой для десктопов ограничены 990px с одной стороны и 1500px с другой (без учета отступа слева в 16em). Получаем полосу прокрутки внутри сообщения... что выглядит очень "не аккуратно".

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

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


 

Похожие темы

  Тема / Автор Ответов Последний ответ
1 Ответов
1590 Просмотров
Последний ответ 08-02-2012, 20:26:24
от ewdokimow
2 Ответов
981 Просмотров
Последний ответ 23-06-2015, 07:27:49
от musorhik
7 Ответов
784 Просмотров
Последний ответ 24-06-2016, 20:19:20
от zanuda
1 Ответов
705 Просмотров
Последний ответ 06-02-2018, 16:00:43
от Urbans
1 Ответов
1959 Просмотров
Последний ответ 29-11-2018, 17:14:55
от ura1205