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

Question

[Адилет Касымбаев]

Учусь верстке. Как можно поставить картинку телефона на центр фоновых кругов?

Comments

[Ankhena]

Это зависит от того, как вы спозционировали круги.

Можно считать координаты от центра через calc, если ширина контентной области фиксирована.
Например, left: calc(50% - 500px), где 500 это половина контентной ширины.
Если она не фиксирована, то просто посчитать в процентах.
Если при этом еще фикс в px отступы, то снова с calc.

Если там еще cover, то нужно смотреть на пропорции блока, телефона и т.д.

Дальше без вашего кода на jsfiddle.net придумывать сложно.

Answer 1

[Lord_Dantes]

Тут нужно не телефон ставить в кружки, а кружки за телефон. Потому-что при неправильном размещении на разных разрешениях телефон не будет стоять правильно.

Comments

[Адилет Касымбаев]

то есть надо чтобы круги были прикреплены к телефону?

[Lord_Dantes]

Toasty, зависит от картинки очень сильно, если градиент сливается с фоном то это нужно думать как лучше разместить

Answer 2

[Alex]

Я думаю примерно так:

1. Берем картинку телефона помещаем её в какой-то контейнер
   
2. На фон контейнера ставим кружки (только кружки). По моему это можно сделать градиентом и не парится с картинкой
   
3. Выравниваем их так, чтобы телефон всегда совпадал с кружками, чтобы они масштабировались вместе
   
4. Отдельно на секцию под кружками бахнуть зеленый градиент
   

Comments

[Адилет Касымбаев]

а почему зеленый 0_o

[Alex]

Toasty, какой на макете

Answer 3

[vetalikpain]

Попробуй флексами, сделай два блока, и задай им width в %, например блоку с картинкой:
width: 30%, соответственно блоку с текстом задай 70%. Каждому из блоков добавь
display: flex. родительскому тоже!
Дочерним еще добавь
justify-content: flex-end;
align-items: center;
А потом уже смотри на глаз, меняй % ширины у дочерних блоков, чтобы попасть телефоном под кольца.
Ну или добавь телефону
positin: absolute и ставь его на место)

Comments

[Адилет Касымбаев]

ну не знаю.. наверно при адпативе мне это доставит проблем

[vetalikpain]

лол, при адаптиве наооборот флексы хорошо работают

[Адилет Касымбаев]

vetalikpain, тогда попробую