Задать вопрос
@Mak_Pet
html

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

Мой вариант - https://makpet.github.io/zebra/
Код - https://github.com/MakPet/zebra

Нужно расположить картинки в блоках таким образом
5d813061677e5702175188.jpeg

Задал им абсолютное позиционирование, но на мобильном изображения "едут".

5d8130937516d145823087.jpeg

Может у кого-то есть идеи как зафиксировать изображение и масштабировать его одновременно?
  • Вопрос задан
  • 83 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
@Mak_Pet Автор вопроса
Рустам Байназаров: overflow: hidden на родителя (квадрат это ваш), чтобы отрезать то, что вылезает за пределы блока.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
polyak-888
@polyak-888
Js, React.js, css, frontend
Еще можно так
для блока обертки:
display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
   margin-right: -10px;


для блоков с картинками учитывая что их 4 штуки и расстояние между ними 20px:
width: calc(25% - 20px);
margin-left: 10px;
margin-right: 10px;


Картинки у тебя закрывают текст, это наверное не есть гуд. Лучше сделай их фоном.
Может где-то надо поправить. Но смысл такой))) Сам такой макет верстал когда-то на bootstrap 3)))
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы