높이 유지 비율에 따라 제곱 사분면 div

Question

높이에 따라 100 % 높이와 너비의 크기 조정이 가능한 사각형을 만들어서 항상 가로 세로 비율을 유지해야합니다.

예 그림 :

네모 DIV 스케일링의 대중적인 예는 폭 (https://spin.atomicobject.com/2015/07/14/css-responsive-square/)에 따르면된다. CSS/flexbox를 사용하여이 문제를 해결하고 싶지만 적절한 해결책을 찾을 수 없습니다. (IE 및 레거시 브라우저 지원은 중요하지 않음)

동일한 스타일을 공유하는 요소가 두 개 이상 있어야합니다. 나는 그것을 그리는 시도했지만,이게 많은 의미가 있는지 모르겠다. 개별 사각형은 바깥 쪽 div에 꼭 맞아야하지만 세 개의 사각형은 같은 크기가 아니어야합니다. 개별 바깥 쪽 div에 적합합니다.

나는 포기하고 나는이 일을 시도했습니다 어떻게 생각하고 싶지만, 내가이 일을 많이 한 적이 있기 때문에 세부 사항으로 이동하기가 어렵다 - 그들 중 누구도 정말 작동하지합니다. 절대 위치 지정을 시도했지만 너비가 필요합니다. jquery를 사용하여 너비/높이를 계산해 보았습니다. 많은 항목이 있기 때문에 오래 걸립니다. 높이를 사용하여 시도했다 : 100 % + width : auto, 아무것도 렌더링하지, 나는 위의 솔루션을 시도했습니다 (이는 훌륭합니다, 예 슬프게도 기반으로 너비가 아닌 높이로 높이) . etcetcetc !! :)

이 문제의 해결책은 내 문제에 충분하지 않습니다.

Answer 1

당신은이 CSS를 사용할 수 있습니다

<div class="square"></div> 

이 HTML에 대한 VH 및 CALC

작업 할 수

body { 
    background-color: #515151; 
} 

.square { 
    margin: 1vh auto; 
    background-color: #cacaca; 
    height: 98vh; 
    width: calc(99vh * 0.8); 
} 

you can see how works in this example

Answer 2

이 시도 :

width: 100vh; 
height: 100vh; 

데모 :

body { 
 
    margin: 0; 
 
} 
 
.square { 
 
    width: 100vh; 
 
    height: 100vh; 
 
    background: grey; 
 
    margin: auto; 
 
}

<div class="square"></div>

jsFiddle

Answer 3

.row { 
 
display:table; 
 
    width:100%; 
 
} 
 
.row div { 
 
display:table-cell; 
 
    vertical-align:top; 
 
    
 
} 
 
.col-1 ,.col-3{ 
 
background-color:red;} 
 
.col-2 { 
 
background-color:green; 
 
}

<div class=row> 
 
    <div class="col-1">1</div> 
 
    <div class="col-2">2</div> 
 
    <div class="col-3">3</div> 
 
    
 
</div>

Answer 4

불행히도 CSS만으로 구현할 수있는 직접적인 방법은 없습니다. 다른 사람이 언급 한대로 뷰포트 단위를 사용할 수 있지만 항상 전체 뷰포트 크기에 상대적입니다.그것은 자바 스크립트를 좀 더 유연하게 할 수있는 유일한 방법입니다 밝혀 :

document.addEventListener('DOMContentLoaded', function() { 
 
    var el = document.getElementById('square'); 
 

 
    (window.onresize = function() { 
 
     el.style.width = el.clientHeight + 'px'; 
 
    })(); 
 
});

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#container { 
 
    background: red; 
 
    height: 80%; 
 
} 
 
#square { 
 
    background: lime; 
 
    height: 100%; 
 
    margin: auto; 
 
}

<div id="container"> 
 
    <div id="square"></div> 
 
</div>