Css/javascript problem

Css/javascript problem


hello all i have some problem i want to solve in the middle distance needs to be a square but i need a automatically resize when its ot of range here some picture examples
i dont know how to approach this
im a beginner and this is learning project for me


share the link to be more specific