Как выравнить изображения разных размеров, чтобы они заполнили всю страницу?

Question

[Tutucu]

Есть много изображений (фото) вертикальных, горизонтальных, с одинаковой шириной и высотой. Как сделать так, чтобы все они полностью заполнили страницу на сайте и при этом сохраняли оригинальные пропорции (хотя бы приблизительно)? Например как на этом сайте: Пример.

Answer 1

[Cyber_bober]

для расположения без дырок используйте masonry.js masonry.desandro.com

Comments

[Tutucu]

Спасибо огромное! То что нужно!

[#rybak]

Cyber_bober а где вы там увидели фиксированную высоту?
у каждого ряда своя высота, за счет этого элементы и выстраиваются : /

[Cyber_bober]

#rybak: у каждого фиксированная высота, но разная ширина.

[#rybak]

Cyber_bober у картинок в первом и втором рядах разная высота, соответственно задавать её нельзя

[Cyber_bober]

#rybak: окей, тут два момента: а) автор вопроса решил задачу б) библиотеки типа masonry все расставят и с разной высотой. Остается одно, что вы от меня хотите?

[#rybak]

Cyber_bober ничего личного.
У вас есть возможность редактировать ваш ответ.
Вы можете исправить ошибку в ответе, чтобы не вводить в заблуждение других людей столкнувшихся с аналогичной проблемой, ведь этот ответ отмечен как решение.

[Cyber_bober]

#rybak: окей, спасибо что вы так внимательны, я отредактировал.

Answer 2

[Антон Нагаец]

Пример
Правильно заметил Cyber_bober У картинок фиксированная высота.

Answer 3

[BohdanK]

Без JS (jQuery) вряд ли обойтись, я не знаю такого решения, разве что изображения делать бэкграундами в css, но так не делается. Попробуйте вот такой вот скрипт применить на своей задаче: jsfiddle.net/oceog/bQjk8

Comments

[Tutucu]

Простите, а почему не делается бэкграундами? Просто иногда приходилось делать нектороые элементы на сайтах именно через background-image, ибо намного легче и быстрее получалось, чем через img.

[BohdanK]

Потому что далее когда Ваш макет будут будут натягивать на какую-либо CMS, то переменные содержащие изображения будут вставлять в HTML код, в общем иными словами HTML код меняется динамически, CSS редко кто динамически меняет.

[BohdanK]

Tutucu: не делается когда картинка это какая-то часть стать или что-то что меняется динамически, если вы верстаете какой-то landing page, который меняться с помощью CMS не будет, то вполне можно использовать background-size.

[Tutucu]

Так для этого к html-тегу прописывал атрибут style, где и указывал картинку, остальное выводил в .css

Answer 4

[Artem Petrenko]

можно flexbox пробовать

Comments

[BohdanK]

На сколько я знаю ему по сути нужна функция аналогична функции в css: background-size: cover; Как с помощью флекс можно расположить так картинку, чтобы она поместился в блок полностью меньшей стороной, а на большей лишнее обрезалось?