CSS 크기 조정 후 공백

크기 조정 된 웹 사이트를 표시하는 iframe이 있지만 크기 조정 후 공백은 유지되고 크기는 크기 조정 전의 크기입니다. 내가 몇 가지 솔루션을 찾았지만, 그것은 나를 위해 일하지 않는 다른 div의 주위에 그것을 포장하려했습니다, 공간은 여전히 거기에 있습니다.CSS 크기 조정 후 공백

당신은 here을 볼 수 있습니다.

HTML

<div id='wrap'>  
<div id='preview_div'> 
    <iframe src="../404/index.php"></iframe> 
</div> 
</div>

CSS

#preview_div { 
    position: relative; 
    width: 700px; 
    height:600px; 
    margin:auto; 
} 

iframe { 
    background-color:white; 
    width: 1400px; 
    height: 960px; 
    position: relative; 
    overflow:hidden; 
    border: none; 

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

#wrap { 
    width:700px; 
    height:600px; 
    margin:auto; 
    float:left; 
}

어떤 아이디어? 감사.

출처

2014-01-23 user3104757

변형은 'position : relative'와 같이 작동합니다. 요소는 문서 흐름 내에서 원래의 크기와 위치를 유지하며 변환으로 렌더링됩니다. –