네이버에서는 검색이 어려운 블로그입니다. 구글검색을 이용해 주세요.
http://stackoverflow.com/questions/166160
두 가지 방식인데 약간의 차이가 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Div Zoom iFrame</title>
<style type='text/css'>
#wrap { width: 600px; height: 1080px; padding: 0; overflow: hidden; }
#frame { width: 1920px; height: 2080px; border: 10px solid red; }
#frame {
zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
</style>
</head>
<body>
<div id="wrap">
<iframe id="frame" src="http://bbc.co.uk"></iframe>
</div>
</body>
</html>
==================================================================
위 방식은 IE8 에서 약간의 문제가 있는것 같은데 아래는 잘 된다.
원문 width: 700px 이고
iFrame width: 630px, 90% 로 축소하고 싶을때..
<html>
<head>
<META HTTP-EQUIV="X-UA-Compatible" CONTENT="IE=EmulateIE9">
<style>
.zoomframe {
-moz-transform: scale(0.90);
-moz-transform-origin: 0 0;
-o-transform: scale(0.90);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.90);
-webkit-transform-origin: 0 0;
}
</style>
<!--[if IE]><div style="zoom: 90%"><![endif]-->
<!--[if !IE]><!--><div style="width: 630px;"><!--<![endif]-->
<iframe src="http://www.tistory.com" class="zoomframe" style="border-width:0px;width:700px;height:1000px" frameborder=0></iframe>
</div>
</body>
</html>
'Web Source' 카테고리의 다른 글
| PHP - Browser detection - IE, Firefox, Safari, Chrome (0) | 2014.09.22 |
|---|---|
| iFrame auto resizer (0) | 2014.09.04 |
| javascript yesterday (0) | 2014.09.03 |
| javascript exist document.getElementById (0) | 2014.09.03 |
| Browser Window Size and Position (0) | 2014.09.02 |
