일부 영역/iframe 확대/축소, Zoom 처리

2016-07-19 13:04:22

iframe 등을 불러올때 또는 특정 영역만 크기를 줄이고 싶을때가 있다. 이럴땐 다음과 같은 Css 코드가 있다.

-ms-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;

transform: scale(0.5);
transform-origin: 0 0;

그러나 이게... 그냥 원본사이즈에서 줄이는거라서...

예에서도 보이듯이 남은 영역은 그냥 공백이다. 이걸 처리하려면.. 원본사이즈의 200% Width 크기에에서 스케일링을 0.5 배 해주고, 남은 영역은 50% 컷....

귀찮다... 스케일링후 공백 제거 옵션 없나? 그래서 이걸 어떻게 처리했냐면...

<style>
	
.cssZoom{
	border:1px solid #ccc;
	padding:10px;
	margin-top:10px;
	width:150px;
	height:50px;
	overflow:hidden;
}

.cssZoom iframe{
	-ms-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;
	
	transform: scale(0.5);
	transform-origin: 0 0;	
	
	border:1px solid #ccc;
	top:0px;
	left:0px;
	
	width:200%;
	height:200%;
}
</style>

<table><tr><td>

	<div style="border:1px solid #ccc;padding:10px;">
		<iframe width="300" height="100" frameborder="0" src="frame.php"></iframe>
	</div>
	
	<div class="cssZoom">
		<iframe frameborder="0" src="frame.php"></iframe>
	</div>

</td></tr></table>

결국 외곽 사이즈를 정해놓고, 내부 사이즈를 가로세로 200% 로 잡아서 0.5 스케일링을 했다.

만약 0.2 로 스케일링 하려면 iframe 은 500% 가 되어야 한다.

브라우저마다 동작하지 않을수 있으니 스케일링이 필요한 곳에서 적당히 이용하면 될듯..