가로 세로 비율을 유지하는 뷰포트 단위?

Question

그래서 뷰포트 단위를 발견했으며 실제로 사용하고 싶습니다.

첫 번째 질문 : 요소의 기본 크기는 760x670 픽셀입니다. 뷰포트 단위를 사용하여 높이가 100vh이거나 너비가 100vw 중 작은 값이되도록 크기를 조정하고 싶습니다.

유감스럽게도 100vmin을 사용하여 두 가지 중 작은 것을 얻을 수는 있지만 폭 및 높이에만 적용 할 수 있습니다. 둘 다 사용할 수는 없습니다.

현재 내가 사용하고 있습니다 :

#root { 
    width: 760px; 
    height: 670px; 
    width: 100vw; 
    height: calc(670vw/760); 
} 

이 수직 스크롤의 결과로, 화면에 맞게 폭을 조절합니다. 너무 나쁘지는 않지만 실제로 뷰포트에 맞출 수 있으면 좋을 것입니다.

Answer 1

나는 IE10에서 작동했습니다 :

#elem { 
    width: 100vw; 
    height: calc((9/16)*100vw); 
} 

@media (min-aspect-ratio:16/9) { 
    #elem { 
     height: 100vh; 
     width: calc((16/9)*100vh); 
    } 
} 

라이브 데모 : 윈도우 7)에 해당하는 IE10 (미리보기 버전 공개 http://jsfiddle.net/C2ZGR/show/ (다음, 다시 크기 창, 그래서 하나 폭 또는 높이가 매우 작음)

가로 세로 비율이 16 : 9 인 요소를 사용했지만 어떤 가로 세로 비율에서도 사용할 수 있습니다. 16/9 및 9/16을 원하는 가로 세로 비율로 바꿉니다.

Btw, IE10은이 데모가 작동하는 유일한 브라우저입니다. Firefox/Opera는 아직 뷰포트 단위를 구현하지 않으며 WebKit 브라우저에는 현재 calc() 내부의 뷰포트 단위를 사용할 수없는 버그가 있습니다.