javascript - 마우스로 div 레이아웃을 그릴 때 작은 이미지를 표시하는 방법은 무엇입니까?

페이지가 두 부분으로 나누어져 있습니다. 위쪽 부분은 마우스로 직사각형을 그리는 부분입니다(이미 구현되어 있음). 확인을 클릭하면 위 그림에 따라 아래에 비례 레이아웃 다이어그램이 나타납니다. . 구체적인 효과는 그림에 표시된 것과 같습니다(그림이 약간 못생겼습니다 = =). 이것을 어떻게 달성할 수 있습니까? 도와주실 분 계신가요? 정말 감사합니다

답글 내용:

페이지가 두 부분으로 나누어져 있습니다. 위쪽 부분은 마우스로 직사각형을 그리는 부분입니다(이미 구현되어 있음). 확인을 클릭하면 위 그림에 따라 아래에 비례 레이아웃 다이어그램이 나타납니다. . 구체적인 효과는 그림에 표시된 것과 같습니다(그림이 약간 못생겼습니다 = =). 이것을 어떻게 달성할 수 있습니까? 도와주실 분 계신가요? 정말 감사합니다

위에서 생각한 것과 동일하게 jq의 추가를 사용하여 상위 div의 전체 콘텐츠를 하위 div에 넣은 다음 변환을 사용하여 하위 div의 스타일을 줄입니다.

아이디어에 대해 이야기해 보겠습니다.
상단과 하단의 두 가지 컨테이너가 있습니다. 컨테이너의 비율에 따라 컨테이너의 요소 크기가 결정됩니다. 확인 후 상위 컨테이너 요소를 하위에 복사합니다. 컨테이너. 하위 컨테이너에 클래스를 추가하고 비례적으로 줄입니다.