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