Как поставить картинку в нужное положение?

Учусь верстке. Как можно поставить картинку телефона на центр фоновых кругов?5f7182973911f266933709.png
  • Вопрос задан
  • 72 просмотра
Решения вопроса 3
Lord_Dantes
@Lord_Dantes Куратор тега CSS
Чат джунов t.me/developersjunior
Тут нужно не телефон ставить в кружки, а кружки за телефон. Потому-что при неправильном размещении на разных разрешениях телефон не будет стоять правильно.
Ответ написан
Kozack
@Kozack
Thinking about a11y
Я думаю примерно так:
  1. Берем картинку телефона помещаем её в какой-то контейнер
  2. На фон контейнера ставим кружки (только кружки). По моему это можно сделать градиентом и не парится с картинкой
  3. Выравниваем их так, чтобы телефон всегда совпадал с кружками, чтобы они масштабировались вместе
  4. Отдельно на секцию под кружками бахнуть зеленый градиент
Ответ написан
@vetalikpain
Попробуй флексами, сделай два блока, и задай им width в %, например блоку с картинкой:
width: 30%, соответственно блоку с текстом задай 70%. Каждому из блоков добавь
display: flex. родительскому тоже!
Дочерним еще добавь
justify-content: flex-end;
align-items: center;
А потом уже смотри на глаз, меняй % ширины у дочерних блоков, чтобы попасть телефоном под кольца.
Ну или добавь телефону
positin: absolute и ставь его на место)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы