div의 너비를 높이의 백분율로 정의하기

Question

브라우저 창 크기를 조정할 때 div의 종횡비를 유지해야합니다.

나는 이것에 대한 검색을 잘 했으므로 화면의 너비가 변경 될 때마다 너비를 기준으로 높이를 지정하여 패딩을 사용하여 div의 종횡비를 유지할 수 있습니다.

이 기술은 스택 오버플로에 here으로 표시되며, 특히이 linked to 예제는 작동중인 기술을 보여줍니다.

하지만 나는 그 반대를 할 필요가 있습니다. div의 폭에 상대적으로 높이를 만드는 대신 브라우저 창의 높이가 변경 될 때마다 div의 너비가 변경되어야합니다. 내가 콘텐츠를 상대적으로 흐르게하고, 배경 이미지의 높이가 100 %이고, 종횡비가 보존되기를 원하는 배경 이미지가 있기 때문에이 작업을 수행해야합니다.

나는 연결된 방법을 사용해 보았지만 수직 특성을 위해 수평을 바꿨습니다. 작동하지 않습니다. 나는 이유를 모른다. 아마도 누군가 어떻게 이것을 할 수 있는지 보여줄 수 있습니다.

Answer 1

보고, 나는이 순수 CSS에 가능하다면 모르겠지만, jQuery로 가능한 방법이 this discussion

어쩌면 mmoustafa 같은 제안 :

$(window).resize(function() { 
    $('#my-div').css('width', window.innerHeight*0.4+'px'); 
    $('#my-div').css('height', window.innerHeight*0.2+'px'); 
}); 

Answer 2

내가 필요로하는 브라우저 창의 높이가 변경 될 때마다 div의 너비가 변경됩니다.

것과 순수 CSS 솔루션을

, 당신도 calc()의 광범위한 구현 또는 vh 단위 기다려야 할 것이다.