javascript - How to display small images when drawing a div layout with the mouse?

The page is divided into two parts. The upper part is to draw a rectangle with the mouse (already implemented). When you click OK, a proportional layout diagram will appear below according to the above graphic. The specific effect is as shown in the figure (the picture is slightly ugly = =) , how to achieve it? Can anyone help me? Thank you very much

Reply content:

The page is divided into two parts. The upper part is to draw a rectangle with the mouse (already implemented). When you click OK, a proportional layout diagram will appear below according to the above graphic. The specific effect is as shown in the figure (the picture is slightly ugly = =) , how to achieve it? Can anyone help me? Thank you very much

Same as what I thought above, use jq’s append to stuff the entire content of the upper div into the lower div, and then use transform to reduce the style of the lower div

Let’s talk about the idea:
There are two containers, upper and lower. The size of the elements in the container is determined according to the percentage of the container. After confirmation, copy the elements of the upper container to the lower container. Add a class to the lower container and reduce it proportionally.