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

[Val_Ery]

У меня есть маленькое предложение, касающееся вставки изображений в сообщения... Простой код:

Код Выделить Развернуть

.bbc_img {
    max-width: 100%;
}

Как на данный момент...
Сейчас любой пользователь может добавить в сообщение изображение, воспользовавшись кнопкой . Собственно, сам bbcode не подразумевает никакой адаптивности. В результате, если кто-то захочет вставить скриншот со своего 2К монитора (1920px), этот скриншот просто не влезет в обертку (блок с классом wrapper), размеры которой для десктопов ограничены 990px с одной стороны и 1500px с другой (без учета отступа слева в 16em). Получаем полосу прокрутки внутри сообщения... что выглядит очень "не аккуратно".

В принципе, пользователь может
- поработать над своим изображением перед вставкой его в сообщение.
Это не всегда хорошо, особенно, если скриншотится нечто с текстом: масштабирование картинки под размер бокса для сообщения может сделать текст просто не читабельным.
- вставить изображение в спойлер
Я сам так делаю. В результате полоса прокрутки появляется только в открытом спойлере, само сообщение аккуратненько вписывается в .postarea
- воспользоваться предоставляемой bbcode возможностью изменить размер отображаемой картинки

Код Выделить Развернуть


[img width=500]

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

скрин - только для примера, показывает, как 500 пиксельные картинки смотрятся на мобилках[/spoiler]

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