Стандартный тег [IMG] и 70%

[SigmaTel71]

Добрый вечер!
Я хочу по всему форуму уменьшить максимальный размер изображений со 100% до 70% по ширине. Покопавшись в файлах /includes/bbcode.php и /styles/prosilver/templates/bbcode.html, я выяснил, что всё это дело завязано на классе "postimage" в CSS. И да, такие строки обнаруживаются, к примеру в стилях Digi они выглядят так:

Код: Выделить всё

.postbody img.postimage {
  max-width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; } 

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

Лишний hover 

30 процентов лишней области.jpg

Навожу мышкой на область "hover" в консоли F12, вижу, что эта область a.postlink (то бишь, выделения ссылки), а изображение, соответственно, img.postimage. Вот как сузить область "hover" для изображений с превью?
Я имел ввиду такого вида картинки с превью, по нажатию открывающие полную "версию".

Код: Выделить всё

[url=link.to/full-image.png][img]link.to/thumbnail-image.png[/img][/url]

[Татьяна5]

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

[Beer]

Посмотри, может это поможет - Открытие вложений графики в prettyPhoto - для владельцев SPOILER от ppk

[SigmaTel71]

для владельцев SPOILER от ppk

Ещё бы найти его...

UPD: расширение нашёл, но тогда возникает проблема с адаптивными стилями. Изображения не вписываются по ширине и сообщение нужно прокручивать.

Проблема с адаптивностью 

Screenshot_20181030-132030~2[1].jpg

[Beer]

Не совсем понятно, но все остальное - css. Правда от балалайки тоже зависит.
Кстати на фото нет работы скрипта prettyPhoto.

[SigmaTel71]

Пересмотрел ещё раз вопрос странного поведения изображений. В спойлерах расписываю, как надо было сделать, оказывается.

1. Исправляем блок img.postimage 

Находим этот блок

Код: Выделить всё

postbody img.postimage {
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

Заменяем в max-width 100% на нужное количество пикселей (512) и добавляем автоматический подбор высоты:

Код: Выделить всё

postbody img.postimage {
    max-width: 512px;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

2. Настраиваем подбор размера 

Для удобства открываем пустой текстовый документ и создаём в нём следующий шаблон:

Код: Выделить всё

@media (min-width: npx) {
 .postbody img.postimage {
  max-width: (n-30)px; }
}

Смотрим, под какие ширины стиль "умеет" выстраивать разметку. В моём случае это были 320, 350, 400, 430, 450 и 500. Пишем в соответствии с шаблоном такой код:

Код: Выделить всё

@media (min-width: 320px) {
	.postbody img.postimage {
		max-width: 290px; }
}
@media (min-width: 350px) {
	.postbody img.postimage {
		max-width: 320px; }
}
@media (min-width: 400px) {
	.postbody img.postimage {
		max-width: 370px; }
}
@media (min-width: 430px) {
	.postbody img.postimage {
		max-width: 400px; }
}
@media (min-width: 450px) {
	.postbody img.postimage {
		max-width: 420px; }
}
@media (min-width: 500px) {
	.postbody img.postimage {
		max-width: 470px; }
}

3. Интегрируем в стиль 

Открываете CSS-файл, в котором были строки из первого пункта, проматываете его в самый конец и вставляете полученный вами результат.

Ответы на вопросы 

Q. Почему не max-width в блоке @media?
A. Конфликтует.

Q. Почему нельзя подключать отдельным файлом через import?
A. У меня такой способ не сработал и не гарантирую, что получится у вас.

Q. Почему размер изображений меньше на 30 пикселей, чем ширина "экрана"?
A. Разные стили работают по-разному с отступами, поэтому картинка сделана меньше с целью обеспечения совместимости.

Q. Зачем вставлять в конец?
A. Если вас не устроит результат, вы сможете быстро найти нужный код и изменить/удалить его.

[toxic steel]

Если я правильно понял задачу:

Написать скриптик, который будет подхватывать $_SERVER['REQUEST_URI'] и забирать из папки картинку с таким же названием, снимать с неё размер и скейлить до заданных. Хотите - просто стилем картинки, хотите - ресайзом прям на лету.

Настроить .htaccess, таким образом, чтобы браузерные запросы к папке с фуллсайзами подхватывались эти скриптом.

PROFIT!


Таким образом устраивают защиту от хотлинков, можете погуглить именно по этому пути.