Я не подскажу точное решение, но как я понимаю, ваша проблема из-за того, что у вас картинка срезается благодаря object-fit (и через background тоже бы срезалась), и координаты точек в процентах считаются не от картинки, а от элемента. Например, top: 20% превратится в 30% относительно верха картинки, если 10% её высоты осталось за краем.
Мне кажется, вам нужно поместить точки в контейнер, зафиксировать ему либо ширину в 100% (смартфоны), либо высоту на фиксированной величине (десктоп), а второй параметр считать или через aspect свойства, или через JS для поддержки любых браузеров. При этом точки размещать в этом контейнере, а картинку сделать его фоном с background: contain для десктопа, когда контейнер шире изображения, а для мобильных просто задать явно ширину background в пикселях больше ширины экрана, а высоту в auto для сохранения пропорций, чтобы края изображения по горизонтали срезались. Либо делайте для смартфонов контейнер со скроллом, что практичнее для пользователя.
Или если вам не критично то, что у вас срезается часть схемы (хотя должно быть критично), можете оставить cover как сейчас (либо background-size: cover), разместить в центре контейнера невидимый блок размером в 1px, точки вкладывать в него и задавать им отрицательные координаты, привязав всё к центру как в школе на графиках. И поставить overflow: hidden на контейнере, чтобы точки тоже скрывались при вылете за края.
Простой
