iframe의 컨텐츠를 어떻게 크기 조절할 수 있습니까? : HTML 페이지이고 팝업이 아님)의 컨텐츠를 어떻게

내 웹 사이트의 페이지에서 iframe의 컨텐츠 (예 : HTML 페이지이고 팝업이 아님)의 컨텐츠를 어떻게 스케일링 할 수 있습니까?

예를 들어, iframe에 나타나는 내용을 원래 크기의 80 %로 표시하고 싶습니다.

답변

CSS를 다음과 같이 변경하면 Kip의 솔루션 이 Opera 및 Safari에서 작동합니다.

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

스크롤바를 방지하기 위해 overflow : #frame에 hidden을 지정할 수도 있습니다.

답변

IE와 Firefox (적어도 현재 버전에서는)에서 작동하는 솔루션을 찾았습니다. Safari / Chrome에서 iframe은 원래 크기의 75 %로 크기가 조정되지만 iframe 내의 내용은 전혀 크기가 조절되지 않습니다. Opera에서는 작동하지 않는 것 같습니다. 약간 난해한 느낌이 들기 때문에 더 좋은 방법이 있다면 제안을 환영합니다.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

참고 : wrapFirefox 요소 를 사용해야했습니다 . 어떤 이유로 Firefox에서 객체를 75 % 축소하면 레이아웃 때문에 이미지의 원래 크기를 사용합니다. (위의 샘플 코드에서 div를 제거하면 무슨 의미인지 알 수 있습니다.)

나는 이 질문 에서 이것의 일부를 발견 했다 .

답변

IE8, 9 및 10에서 작동하도록 몇 시간 동안 어려움을 겪은 후 여기에 도움이 된 것이 있습니다.

이 제거 된 CSS는 FF 26, Chrome 32, Opera 18 및 IE9 -11에서 2014 년 1 월 7 일부터 작동합니다.

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

IE8의 경우 너비 / 높이를 iframe과 일치하도록 설정하고 .wrap 컨테이너 div에 -ms-zoom을 추가하십시오.

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

브라우저 스니핑에 선호하는 방법을 사용하여 적절한 CSS를 조건부로 포함하십시오 . * .css 파일에서 브라우저 특정 조건부 CSS를 수행하는 방법이 있습니까? 몇 가지 아이디어.

IE7까지 -ms-zoom이 없었기 때문에 IE7은 손실 된 원인이었습니다.

테스트 한 실제 HTML은 다음과 같습니다.

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

답변

방금 테스트했으며 다른 솔루션은 작동하지 않았습니다. 나는 이것을 간단하게 시도했고 예상대로 Firefox와 Chrome에서 완벽하게 작동했습니다.

<div class='wrap'>
    <iframe ...></iframe>
</div>

그리고 CSS :

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

모든 내용을 30 % 확장합니다. 물론 너비 / 높이 백분율을 적절히 조정해야합니다 (1 / scale_factor).

답변

lxs의 답변에 대한 후속 조치 : zoom및 --webkit-transform태그 를 동시에 갖는 것이 이중 확대 효과를 수행하여 Chrome (버전 15.0.874.15)을 혼란스럽게 하는 문제를 발견했습니다 . 내가 대체하여 문제를 해결할 수 있었다 zoom으로는 -ms-zoom단지 사용하기 위해 크롬을 떠나 (단지 IE 대상)을 --webkit-transform태그를 사물을 정리하는.

답변

추가 태그로 iframe을 감싸지 않아도됩니다. iframe을 축소 할 때와 같은 양만큼 iframe의 너비와 높이를 늘리십시오.

예를 들어 iframe 컨텐츠를 80 %로 스케일링 :

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8);
    transform-origin: 0 0;
}

기본적으로 동일한 크기의 iframe을 얻으려면 크기를 조정해야합니다.

답변

html {zoom : 0.4;}?-)