Как разместить несколько картинок рядом на сайте?
Здравствуйте. Вопрос по изображениям.
Что делать, если необходимо на сайте расположить рядом несколько изображений разных размеров. Например, одно горизонтальное, другое вертикальное, разные по длине и ширине. Таким образом, чтобы их общая ширина была равна ширине блока, в котором они находятся, но высота изображений была одна, без потери соотношения их сторон?
Возможно ли такое с использованием Bootstrap? При этом, нужно сохранять их адаптивность. То есть уменьшать их при уменьшении размеров экрана. Пробовал классimg-responsive
, но он, как я понял, просто вписывает изображение в ширину блока...
Ответы: 9
Может вам поможет https://sapegin.github.io/jquery.mosaicflow/ поможет.
На itchief.ru урок по этому есть: https://itchief.ru/bootstrap/image-gallery.Спасибо. Попробовал, но всё равно получается немного не то. Наверное, я не точно сформулировал задачу.
Изображения необходимо будет добавлять в статьи на сайте, а скрипт поместить например перед закрывающим тегом</body>
на постоянной основе. Чтобы он, видя обозначенный блок (в моём примере этоdiv.main
), совершал в нём все эти расчеты с изображениями... Плюс, хочется видеть изображения в их полном «необрезанном» виде. Высота контейнера при этом неважна, главная задача ровно расположить изображения по всей ширине контейнера без изменения их пропорций...Александр, спасибо за ответ. Но похоже, мне всё-таки нужен будет вариант с Javascript.
В данном способе, как я понял, изображения подключаются через css свойствоbackground
, а в моём случае изображения будут добавляться динамически (то есть, придётся к каждой статье на сайте менять это свойство для картинок). Плюс, картинок может быть не две, а больше. На одном из форумов подсказали интересное решение на JS: HTML:JS:
Код работает, но есть три минуса:
main
задавать в процентах - размеры картинок всё равно остаются в пикселях, и при изменении размеров экрана вёрстка рушится.Если у вас найдётся время и желание помочь с этим делом, был бы очень признателен :)
Можно конечно и так сделать, но тут необходимо будет всё вычислять.
С помощью JavaScript можно не только изображения, но и целые блоки добавлять.Например, в HTML создать только контейнер:
Скрипт JavaScript (с использованием jQuery) для динамического вывода изображений:
Т.е. создаём объект
images
и записываем туда, сколько необходимо вывести количество блоков (например, 2) и также пути к изображениям для каждого блока.Тогда эти стили можно удалить из CSS:
Можно конечно и этот доработать...
Чтобы он работал адаптивно необходимо рассчитывать тогда не высоту, а ширину и устанавливать её в процентах от ширины контейнера. Добавление отступов в вышепредставленном скрипте осуществляется посредствомmargin
, и указывать их лучше в пикселях. Иначе изображения получатся немного разные, т.к. они имеют не одинаковую ширину.Если необходимо установить несколько таких блоков, то необходимо просто вызвать ещё раз функцию
resizePictures
и передать ей в качестве параметра нужный идентификатор блока:Но, решение на свойстве
background
даже на основании этого скрипта было бы более простым...Громадное спасибо!
Пара вопросов:1) Можно ли сразу добавить в скрипт несколько контейнеров, в которых будут ресайзиться изображения?
Например: Идея в том, чтобы подключить скрипт перед</body>
и больше к нему не возвращаться, а в статьях просто прописывать нужные классы блокам (вряд ли больше трёх будет в статье)...2) Правильно ли я сделал, заменив
id
наclassName
во всём скрипте, если хочу идентифицировать блок с изображениями по классу, а не поid
? Вроде, работает.1) Да, можно:
2) Можно вместо
id
использовать имя класса.Добрый день. Без JavaScript это можно выполнить только на Flexbox. Только вам необходимо указать высоту контейнера с изображениями.
Код HTML: Код CSS: