
Вопрос по изображениям
Здравствуйте. Вопрос по изображениям.
Что делать, если необходимо расположить рядом несколько изображений разных размеров (например, одно горизонтальное, другое вертикальное, разные по длине и ширине) таким образом, чтобы их общая ширина была равна ширине блока, в котором они находятся, но высота изображений была одна, без потери соотношения их сторон? Возможно ли такое с использованием 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: