Как разместить несколько картинок рядом на сайте?
Здравствуйте. Вопрос по изображениям.
Что делать, если необходимо на сайте расположить рядом несколько изображений разных размеров. Например, одно горизонтальное, другое вертикальное, разные по длине и ширине. Таким образом, чтобы их общая ширина была равна ширине блока, в котором они находятся, но высота изображений была одна, без потери соотношения их сторон?
Возможно ли такое с использованием Bootstrap? При этом, нужно сохранять их адаптивность. То есть уменьшать их при уменьшении размеров экрана. Пробовал классimg-responsive
, но он, как я понял, просто вписывает изображение в ширину блока...
Изображения необходимо будет добавлять статьи на сайте, а скрипт поместить например перед закрытием на постоянной основе, чтобы он, видя обозначенный блок (в моём примере это div.main), совершал в нём все эти рассчёты с изображениями… Плюс, хочется видеть изображения в их полном, «необрезанном» виде. Высота контейнера при этом неважна, главная задача ровно расположить изображения по всей ширине контейнера без изменения их пропорций…
На одном из форумов подсказали интересное решение на JS:
HTML:
JS:
Код работает, но есть три минуса:
1. Изображения нужно добавлять вплотную друг к другу, таким образом смотрится не очень красиво без отступов.
2. Размеры изображений вычисляются в пикселях, что приводит к потере адаптивности. Если ширину блока main задавать в процентах — размеры картинок всё равно остаются в пикселях, и при изменении размеров экрана вёрстка рушится.
3. Если нужно создать на странице, например, два таких блока по два изображения в каждом, всё равно скрипт будет считать их общие размеры, и результат получится не тот, что нужен.
К сожалению, с моим незнанием языка Javascript, не хватает мозгов, чтобы допилить данный скрипт…
Если у вас найдётся время и желание помочь с этим делом, был бы очень признателен :)
С помощью JavaScript можно не только изображения, но и целые блоки добавлять.
Например, в HTML создать только контейнер:
Скрипт JavaScript (с использованием jQuery) для динамического вывода изображений:
Т.е. создаём объект images и записываем туда, сколько необходимо вывести количество блоков (например, 2) и также пути к изображениям для каждого блока.
Тогда эти стили можно удалить из CSS:
Чтобы он работал адаптивно необходимо рассчитывать тогда не высоту, а ширину и устанавливать её в процентах от ширины контейнера.
Добавление отступов в вышепредставленном скрипте осуществляется посредством margin, и указывать их лучше в пикселях. Иначе изображения получатся немного разные, т.к. они имеют не одинаковую ширину.
Если необходимо установить несколько таких блоков, то необходимо просто вызвать ещё раз функцию resizePictures и передать ей в качестве параметра нужный идентификатор блока.
Но, решение на свойстве background даже на основании этого скрипта было бы более простым…
Пара вопросов:
1. Можно ли сразу добавить в скрипт несколько контейнеров, в которых будут ресайзиться изображения? например,
Идея в том, чтобы подключить скрипт перед </боди> и больше к нему не возвращаться, а в статьях просто прописывать нужные классы блокам (вряд ли больше трёх будет в статье)…
2. Правильно ли я сделал, заменив «id» на «className» во всём скрипте, если хочу идентифицировать блок с изображениями по классу, а не по ид? Вроде, работает.
2. Можно использовать вместо id и имя класса.
Код HTML:
Код CSS: