Задать вопрос

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

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

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

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