Как выравнить изображения разных размеров, чтобы они заполнили всю страницу?
Есть много изображений (фото) вертикальных, горизонтальных, с одинаковой шириной и высотой. Как сделать так, чтобы все они полностью заполнили страницу на сайте и при этом сохраняли оригинальные пропорции (хотя бы приблизительно)? Например как на этом сайте: Пример.
#rybak: окей, тут два момента: а) автор вопроса решил задачу б) библиотеки типа masonry все расставят и с разной высотой. Остается одно, что вы от меня хотите?
Cyber_bober ничего личного.
У вас есть возможность редактировать ваш ответ.
Вы можете исправить ошибку в ответе, чтобы не вводить в заблуждение других людей столкнувшихся с аналогичной проблемой, ведь этот ответ отмечен как решение.
Без JS (jQuery) вряд ли обойтись, я не знаю такого решения, разве что изображения делать бэкграундами в css, но так не делается. Попробуйте вот такой вот скрипт применить на своей задаче: jsfiddle.net/oceog/bQjk8
Простите, а почему не делается бэкграундами? Просто иногда приходилось делать нектороые элементы на сайтах именно через background-image, ибо намного легче и быстрее получалось, чем через img.
Потому что далее когда Ваш макет будут будут натягивать на какую-либо CMS, то переменные содержащие изображения будут вставлять в HTML код, в общем иными словами HTML код меняется динамически, CSS редко кто динамически меняет.
Tutucu: не делается когда картинка это какая-то часть стать или что-то что меняется динамически, если вы верстаете какой-то landing page, который меняться с помощью CMS не будет, то вполне можно использовать background-size.
На сколько я знаю ему по сути нужна функция аналогична функции в css: background-size: cover; Как с помощью флекс можно расположить так картинку, чтобы она поместился в блок полностью меньшей стороной, а на большей лишнее обрезалось?
Простой
