Как сделать так,чтобы картинка не съезжала при масштабировании?

Question

[squimen]

<img src="images/main_picture.png"class="main_image" alt="Woman">

position: absolute;
  right: 354px;
  top: 169px;
  border-radius: 25px;
  background: #D9D9D9;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

Comments

[Ankhena]

С такими стилями картинка никуда не уезжает. Она остается прибита к своему relative в фиксированных координатах.
Возможно, двигается relative или изменяет размеры-пропорции.

Но 354 и 169 вообще выглядят довольно подозрительно.

Чтобы получить помощь, нужно:
1. Сделать песочницу на codepen.io или jsfiddle.net или аналоге, чтобы было видно проблему.
2. Описать, а как должно быть.

Чтобы решить проблему самостоятельно:
1. Почитать про calc
2. Про относительные единицы измерения. Для начала, скорее всего, % и vw с vh. Но лучше про все.