div 안에 HTML을 렌더링하고 내용의 크기를 조정하십시오.

제가 작업중인 시스템은 인보이스와 HTML 형식의 여러 문서를 생성합니다.div 안에 HTML을 렌더링하고 내용의 크기를 조정하십시오.

누군가이 문서를 검색 할 때 문서의 미리보기가 작은 결과가 나타나야합니다. 클라이언트는 HTML 문서가 div 안에 표시되기를 원한다. (이 div는 실제 문서 크기보다 작다.) 달성하고자하는 것은 div 내부에 html을 표시하고 div의 내용을 자동으로 크기 조정하는 것이다. 크기.

div 안에 html을 렌더링하면 스크롤 막대를 추가하고 원본 크기로 표시하므로 HTML 내용이 div 크기에 맞게 표시됩니다.

나는 CSS의 시트에서 글꼴, 너비, 포함 된 div 안의 요소의 높이를 변경했지만 모든 문서의 html 구조에는 실제로 패턴이 없기 때문에 결과가 예상치 못한 것들, 아마 자바 스크립트 또는 jquery 플러그인으로 이것을 할 수있는 더 깨끗한 방법이 있는지 궁금합니다.

출처

2013-07-12 Cristian A. Hurtado Romero

div에 scale을 사용하면 내부의 모든 것을 줄일 수 있습니다.

http://www.w3.org/TR/css3-transforms/은 모든 CSS 변환에 대한 참조입니다. 잔인한 것 같지만 규모에 대해서만 설명하는 W3C 페이지는없는 것 같습니다.

어쨌든, 당신이 사용할 수있는 CSS는 다음과 같이이다 :

.preview { 
    width:600px; height:400px; 
    -webkit-transform:scale(.25); 
    -ms-transform:scale(.25); 
    transform:scale(.25); 
    -webkit-transform-origin:0 0; 
    -ms-transform-origin:0 0; 
    transform-origin:0 0; 
    border:4px solid green; 
    margin:0 0 -300px 0; 
}

결과는

http://jsfiddle.net/asxqL/4/ 같은 주를 보이는 대부분의 측정은 여기에 0.25 (예를 들어, 4 픽셀 경계 곱 있지만, 1 픽셀 너비로 나온다.) 요소에 의해 차지 된 수직 공간은 여전히 400 픽셀이다. 그것이 -300px의 하단 여백이 들어오는 곳입니다.

출처

2013-07-12 07:27:01

위대한 !! 그 일이 순조롭게 진행되어 주셔서 대단히 감사합니다 !! –

당신을 진심으로 환영합니다. 하지만 대답은 조금 성급했습니다. 여기에 게시 된 버전은 Firefox와 Opera에서만 작동합니다. Chrome/Safari 및 IE에서도 작동하려면 변환 속성의'-webkit-'및'-ms-'버전을 포함시켜야합니다. [new jsFiddle] (http://jsfiddle.net/asxqL/4/)을 참조하십시오. 그 죄송합니다. 나는 나의 대답을 업데이트했다. –

div 안에 HTML을 렌더링하고 내용의 크기를 조정하십시오.

답변

관련 문제