div의 내용을 백분율로 확대하시겠습니까?

div의 내용을 백분율로 확대하시겠습니까?

사용자가 상자 주위를 이동하여 페이지 레이아웃(기본 아이디어)을 작성할 수 있는 일종의 CMS 구축.

데이터베이스에서 실제 내용을 가져와서 "페이지"를 작성하고 싶은데, 50% 스케일로 표시됩니다.

저는 CSS 두 세트를 가질 수 있다는 것을 알고 있습니다. 하나는 실제 전면 페이지용이고 하나는 관리 도구용이며 모든 것을 그에 따라 축소할 수 있습니다. 하지만 그것은 유지해야 할 고통인 것 같습니다.

저는 어떤 종류의 jquery나 CSS 또는 제가 div를 채우고 50% 규모의 속성(?)을 줄 수 있는 무언가가 있기를 바라고 있었습니다.

확대/축소 속성을 사용할 수 있습니다.

#myContainer{
    zoom: 0.5;
    -moz-transform: scale(0.5);
}

내 컨테이너에는 편집 중인 모든 요소가 들어 있습니다.이 기능은 모든 주요 브라우저에서 지원됩니다.

이 크로스 브라우저 lib는 더 안전해 보입니다. 단지 줌과 모즈 변환만으로 jquery.transform2d의 스케일()만큼 많은 브라우저를 커버하지 못할 것입니다.

http://louisremi.github.io/jquery.transform.js/

예를들면

$('#div').css({ transform: 'scale(.5)' });

갱신하다

좋아요 - 사람들이 설명 없이 이것을 부결시키는 것을 봅니다.여기서 다른 대답은 오래된 Safari(Tiger를 실행하는 사람들)에서는 작동하지 않을 것이고, 일부 오래된 브라우저에서는 일관되게 작동하지 않을 것입니다. 즉, 확장은 하지만 매우 픽셀화되거나 다른 브라우저와 일치하지 않는 방식으로 요소의 위치를 변경합니다.

http://www.browsersupport.net/CSS/zoom

또는 이 질문을 보십시오. 이 질문은 다음과 같습니다.

크로스 브라우저 CSS 확대/축소를 위한 완전한 스타일

언급URL : https://stackoverflow.com/questions/17333254/scale-the-contents-of-a-div-by-a-percentage