Как сделать адаптивное изображение background и адаптивный border-radius?

Question

[OccamaRazor]

codepen.io/anon/pen/JbELrq

Хочу сделать адаптивный .inner, чтобы картинка вместе с ободом уменьшалась и увеличивалась в зависимости от разрешения при этом не искажался border-radius и bg картинки не уплывало в неведомые края

Answer 1

[Дмитрий]

Т.к. у тебя оно position: absolute, я вижу лишь единственный вариант
Когда блок доходит до правого края, через media queryleft заменять на right: 0. Потом, когда левый край контейнера начнет заходить на блок, опять же через квери задавать блоку width 100% и left, right = 0. Должно работать. А высоту можно делать через vw.

Answer 2

[Ankhena]

1. border-radius задается в %% (для круга - 50%)

2. Позиционирование блока неизвестной ширины по центру:

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

3. Изменение размеров в зависимости от экрана это @media запросы