Как сделать адаптивный коллаж?

Question

Игорь Павленко @MrSteep

ленивый

Как сделать адаптивный коллаж?

Как сделать адаптивный коллаж как на Рамблер.Новости? Так чтобы изображения сжимались пропорционально? Буду благодарен за пример на JSFiddle

Вопрос задан более трёх лет назад
2971 просмотр

Комментировать

Подписаться 3 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 2

3 комментария

Игорь Павленко @MrSteep Автор вопроса

Думаете рамблер для этого использует masonry? Я бы не хотел тащить с собой лишние килобайты)

Написано более трёх лет назад
Кирилл Арутюнов @arutyunov

Игорь Павленко: ну у них что-нибудь свое аналогичное написано
Многие советуют flexbox использовать.

Написано более трёх лет назад
Максим Тимофеев @webinar Куратор тега Веб-разработка

Игорь Павленко: Они используют просто css c абсолютным позиционированием, не лучший вариант. Все зависит от верстки остальной части. В ответе описал разумные варианты.

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 1 подписчик
- час назад
- 25 просмотров
2

ответа
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 7 часов назад
- 80 просмотров
2

ответа
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 10 часов назад
- 104 просмотра
4

ответа
Веб-разработка

+1 ещё

Средний
Как синхронизировать ТГ-канал и сайт?
- 1 подписчик
- 14 часов назад
- 70 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 76 просмотров
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
CSS

Простой
Как задать универсальный @keyframes для нескольких разных блоков, без скриптов?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
JavaScript

+4 ещё

Простой
Почему при загрузке страницы происходит быстрый скролл вниз, а затем вверх?
- 1 подписчик
- вчера
- 83 просмотра
1

ответ
CSS

Простой
Как в CSS повернуть горизонтальный сайт на 90° чтобы на смартофне можно было горизонтально смотреть?
- 4 подписчика
- вчера
- 999 просмотров
2

ответа
JavaScript

+3 ещё

Средний
Swiper js, как сделать чтобы при фокусе по табу на ссылке внутри слайда не исчезала пагинация?
- 1 подписчик
- вчера
- 45 просмотров
0

ответов
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Поменять пароль root пользователя mysql

01 мая 2024, в 23:44

1000 руб./за проект

Модифицировать android приложение

01 мая 2024, в 23:25

2000 руб./за проект

Разработка онлайн казино слот-машины "Клубника" Pixi.js или Three.js

01 мая 2024, в 23:05

1500 руб./в час

Answer 1 · 2016-02-17 09:45:26

Кирилл Арутюнов @arutyunov

Mooza.ru — Делаем сайты

Попробуйте masonry

Ответ написан более трёх лет назад

3 комментария

Answer 2 · 2016-02-17 12:42:49

Вариантов миллион. Например getbootstrap.com/css/#grid или любой другой css framework c grid. Или например isotope.metafizzy.co
Или просто на css играя с width контейнера для фото, а фото на background и backgroundsize cover или contain

Как сделать адаптивный коллаж?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт