답변:
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>방금 테스트했으며 다른 솔루션은 작동하지 않았습니다. 나는 이것을 간단하게 시도했고 예상대로 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).
overflow: hidden;하려고합니다 .wrap. iframe { width: 200%; height: 200%; transform: scale(0.5); }iframe 을 사용하면 오버플로가 시작됩니다.
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을 얻으려면 크기를 조정해야합니다.
위에 주어진 것을 사용하여 내가 생각 해낸 것을 공유하겠다고 생각했습니다. Chrome을 확인하지 않았지만 IE, Firefox 및 Safari에서 작동하는 한 작동합니다.
이 예제의 특정 오프셋 및 확대 / 축소 비율은 Facebook 탭 (810px 너비)에 대해 iframe에서 두 개의 웹 사이트를 축소하고 가운데 맞추는 데 효과적입니다.
사용 된 두 사이트는 워드 프레스 사이트와 네트워크입니다. 나는 html을 잘하지 못하기 때문에 아마도 더 나았을 수도 있지만 결과는 좋아 보입니다.
<style>
#wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
#frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
#frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
<iframe id="frame" src="http://www.example.com"></iframe>
</div>창의 크기를 조정할 때 iframe과 그 내용의 크기를 조정하려면 다음을 창의 크기 조정 이벤트와 iframe onload 이벤트로 설정할 수 있습니다.
function()
{
var _wrapWidth=$('#wrap').width();
var _frameWidth=$($('#frame')[0].contentDocument).width();
if(!this.contentLoaded)
this.initialWidth=_frameWidth;
this.contentLoaded=true;
var frame=$('#frame')[0];
var percent=_wrapWidth/this.initialWidth;
frame.style.width=100.0/percent+"%";
frame.style.height=100.0/percent+"%";
frame.style.zoom=percent;
frame.style.webkitTransform='scale('+percent+')';
frame.style.webkitTransformOrigin='top left';
frame.style.MozTransform='scale('+percent+')';
frame.style.MozTransformOrigin='top left';
frame.style.oTransform='scale('+percent+')';
frame.style.oTransformOrigin='top left';
};이렇게하면 iframe과 내용이 랩 div의 100 % 너비 (또는 원하는 백분율)로 조정됩니다. 또한 보너스로 프레임의 CSS를 하드 코딩 된 값으로 설정할 필요가 없습니다. 모두 동적으로 설정되므로 랩 div를 표시하는 방법에 대해 걱정하면됩니다.
나는 이것을 테스트했으며 크롬, IE11 및 파이어 폭스에서 작동합니다.
javascript로 원하는 높이와 너비를 계산하고 (document.body.clientWidth 등을 통해) 다음과 같이 HTML에 iframe을 삽입 하여이 작업을 수행 할 수 있다고 생각합니다.
var element = document.getElementById ( "myid"); element.innerHTML + = "<iframe src = 'http : //www.google.com'height = '200'width = '"+ document.body.clientWidth * 0.8 + "'/>";
IE6에서 이것을 테스트하지는 않았지만 좋은 것들과 함께 작동하는 것 같습니다 :)
IE 에서이 작업을 수행하는 데 문제가있는 사람들은 -ms-zoom아래 제안대로 사용 #wrap하고 iframeid가 아닌 div 에서 확대 / 축소 기능을 사용하는 것이 좋습니다 . 내 경험상, zoom의 iframe div 크기를 조정 하는 함수를 사용 #frame하면 iframe 크기가 조정되고 그 안에 내용이 없습니다 (이것이 원하는 것입니다).
이것처럼 보입니다. IE8, Chrome 및 FF에서 작동합니다.
#wrap {
overflow: hidden;
position: relative;
width:800px;
height:850px;
-ms-zoom: 0.75;
}zoomIE8에서 표준 모드, 사용 -ms-zoom쿼크 모드이다.
이것은 890px 너비의 페이지에서 내 솔루션이었습니다.
#frame {
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0;
}#wrap #frame 솔루션은 #wrap의 숫자가 #frame 곱하기 scale factor 인 한 잘 작동합니다. 축소 된 프레임의 해당 부분 만 표시됩니다. 여기에서 웹 사이트를 축소하고 woodmark jQuery 플러그인을 사용하여 웹 사이트와 같은 형식으로 만드는 것을 볼 수 있습니다.
아마도 최선의 해결책은 아니지만 제대로 작동하는 것 같습니다.
<IFRAME ID=myframe SRC=.... ></IFRAME>
<SCRIPT>
window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>분명히 부모를 고치려고하지 않고, 약간의 자바 스크립트를 사용하여 자식의 본문에 "zoom : 50 %"스타일을 추가하면됩니다.
"HTML"요소의 스타일을 설정할 수는 있지만 시도하지는 않았습니다.
HTML에는 그런 기능이 없다고 생각합니다. 내가 트릭을 할 것이라고 상상할 수있는 유일한 것은 서버 측 처리를하는 것입니다. 게재하려는 웹 페이지의 이미지 스냅 샷을 가져 와서 서버에서 확장하여 클라이언트에 게재 할 수 있습니다. 그러나 이것은 비대화 형 페이지입니다. (이미지 맵에 링크가있을 수 있지만 여전히있을 수 있습니다.)
또 다른 아이디어는 HTML을 변경하는 서버 측 구성 요소를 갖는 것입니다. 파이어 폭스 2.0 줌 기능과 같은 소리. 물론 이것은 완벽한 확대 / 축소는 아니지만 아무것도 아닌 것보다 낫습니다.
그 외에는 아이디어가 없습니다.