HTML 레이아웃 크기 조정

Question

다른 중첩 요소가있는 html div (또는 일부 요소)가 있다고 가정 해 보겠습니다. 픽셀 배치와 픽셀 크기 (백분율이 아닌)를 사용하여 레이아웃을 디자인 한 다음 결과 UI를 화면에 맞게 확대 (가로 세로 비율 유지) 할 수 있기를 원합니다.

내 질문에 어떻게 레이아웃을 유지하면서 임의의 html 요소를 확장 할 수 있습니까? 여기

내가 확장 할 수있는 UI의 예, • CSS 규모 좋은 생각처럼 보였다 변환 http://jsfiddle.net/8dodovmn/2/

<div id="myUI" style="width:400px; height:300px; background-color:blue; position:relative;">  
    <div style="border:1px solid red; position:absolute;left:100px; top: 100px; width:100px; height:100px; text-align:center;"> 
     <button style="height:50px; margin-top:20px;">Submit</button> 
    </div> 
</div> 

,하지만 작동하지 않습니다 http://jsfiddle.net/Lqozzpmg/1/ 요소의 레이아웃 보존되지 않습니다. #myUI 요소는 다음 CSS 작은 약간 수정 한 것, 그것과 관련하여 배치 할 수 있도록 포함 된 요소를 추가

#myUI 
{ 
    -webkit-transform: scale(2); /* Doesn't work, though it seems like it should. Layout of nested elements is not maintained */ 
} 

Answer 1

보십시오. See fiddle here 또는 텍스트 HTML

<div id="box"> 
    <div id="myUI" style="width:400px; height:300px; background-color:blue; position:relative;"> 
     <div style="border:1px solid red; position:absolute;left:100px; top: 100px; width:100px; height:100px; text-align:center;"> 
      <button style="height:50px; margin-top:20px;">Submit</button> 
     </div> 
    </div> 
</div> 

CSS 코드

#box { 
    width:50vw; 
    height:50vh; 
    text-align:center; 
} 
#myUI { 
    transform: translateY(-50%); 
    -webkit-transform:translateY(-50%); 
    top:50%; 
    transform: scale(2); 
    /* Doesn't work, though it seems like it should. Layout of nested elements is not maintained */ 
    transform-origin: 0%; 
} 

당신이 상상할 수있는 바와 같이

아래에서, #box 크기가 데모 목적을 위해, 당신은 당신이 원하는 무엇이든 사용할 수 있습니다. 뷰포트 크기를 사용할 필요가 없습니다. 일반적으로 사용되지 않는 CSS 측정 값을 표시하기 위해 방금 사용했습니다. 그러나 다시 원하는대로 사용하십시오.