Компоновка картинок - Блог - Aleksandrоv

Вариант оформления постов со скриншотами «как в ВК» простыми средствами HTML.

Как мы знаем, максимальная ширина одиночной картинки в форумном посте ограничена 600 пикселями. Для чего это сделано — понятно, но всё же зря пустующее место не всегда радует.

Выход — конечно же, в том, чтобы добавлять в пост несколько картинок: их общая возможная ширина — 691 пиксель, что уже выглядит лучше. Правда, нужно учесть, что наш пост могут процитировать целиком, а блок цитирования отнимает у цитируемого 9 пикселей ширины, отчего ряды картинок рассыпаются, если использовать всю ширину по максимуму. Поэтому в качестве оптимальной общей ширины я выбрал 678 пикселей. С маленьким запасом ещё на всякий случай. Может, у кого-то отступы шире, и вроде того.

Чтобы устроить всё это оформление, после добавления в наш пост картинок нужно выключить визуальный редактор по одноимённой кнопке и вручную отредактировать их код, добавив значения высот и ширин перед атрибутами «alt». Потрудиться — пять минут, а радовать, наверное, будет долго.

Ниже идут примеры разных компоновок для наиболее распространённых форматов изображений.

2 в ряд

Общее правило: width="338", width="337";
высота должна быть одинаковой, соответствуя наименьшей ширине

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="190" width="338" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="190" width="337" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="211" width="338" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="211" width="337" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="253" width="338" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="253" width="337" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="270" width="338" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="270" width="337" alt="image" /></a>

3 в ряд

Общее правило: width="224", width="224", width="224";
высота выходит одинаковой по умолчанию

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="126" width="224" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="126" width="224" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="126" width="224" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="140" width="224" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="140" width="224" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="140" width="224" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="168" width="224" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="168" width="224" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="168" width="224" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="179" width="224" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="179" width="224" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="179" width="224" alt="image" /></a>

4 в ряд

Общее правило: width="168", width="167", width="167", width="167";
высота должна быть одинаковой, соответствуя наименьшей ширине

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="94" width="168" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="94" width="167" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="94" width="167" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="94" width="167" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="104" width="168" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="104" width="167" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="104" width="167" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="104" width="167" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="125" width="168" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="125" width="167" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="125" width="167" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="125" width="167" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="134" width="168" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="134" width="167" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="134" width="167" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="134" width="167" alt="image" /></a>

2 сбоку

На случай, если один из кадров нужно подчеркнуть особо.

Общее правило: первая картинка получает class="margins alignleft";
высота 2-й и 3-й картинки = 1/2 от [высоты 1-й картинки минус 10px на отступ]

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins alignleft" src="LINK" height="254" width="452" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="122" width="216" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="122" width="216" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins alignleft" src="LINK" height="282" width="451" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="136" width="217" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="136" width="217" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins alignleft" src="LINK" height="337" width="449" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="164" width="219" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="163" width="219" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins alignleft" src="LINK" height="360" width="450" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="175" width="218" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="175" width="218" alt="image" /></a>

3 сбоку

Общее правило: первая картинка получает class="margins alignleft";
высота 2-й, 3-й и 4-й картинки = 1/3 от [высоты 1-й картинки минус 20px на 2 отступа]

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins alignleft" src="LINK" height="287" width="510" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="89" width="158" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="89" width="158" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="89" width="158" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins alignleft" src="LINK" height="317" width="508" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="99" width="160" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="99" width="160" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="99" width="160" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins alignleft" src="LINK" height="380" width="507" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="120" width="161" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="120" width="161" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="120" width="161" alt="image" /></a>

Посмотреть код

<a class="noback lightbox" href="LINK"><img class="margins alignleft" src="LINK" height="407" width="508" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="129" width="160" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="129" width="160" alt="image" /></a><a class="noback lightbox" href="LINK"><img class="margins" src="LINK" height="129" width="160" alt="image" /></a>

Скомпонованные ряды, разумеется, можно неоднократно повторять, и комбинировать их разные виды.