최대 높이 CSS 가로 세로 비율

Question

가로 세로 비율을 사용하여 크기를 조정할 수 있지만 최대 높이 및 최소 높이로 유지할 섹션이 있습니다. 어떻게 든 max-height 속성은 이것에 적용되지 않는다. min-width는 잘 동작한다.

div { 
 
    background: green; 
 
    border-bottom: 2px solid red; 
 
    padding-top: 60%; 
 
    max-height: 100vh; 
 
    min-height: 450px; 
 
    box-sizing: border-box; 
 
}

<div></div>

어떤 내가 얻을려고하면 최소의 높이에 도달 할 때까지 다운 스케일링하고, 고정 된 종횡비를 갖는 콘텐츠를 표시하는 것뿐만 아니라, 경우에 표시 영역의 높이를 초과하지 더 넓은 브라우저에 표시됩니다. 설명을 첨부 이미지 참조 :

어떤 아이디어?

Answer 1

height: 100vh 설정은 귀하의 질문을 정확하게 이해 한 경우에 충분할 것입니다. 100vh은 요소가 DOM 트리에있는 위치에 관계없이 브라우저 창의 높이와 같습니다. 이 규칙은 min-height과 함께 적용 할 수 있습니다. 내가 제대로 이해한다면

div { 
    height: 100vh; 
    min-height: 300px; 
    padding-top: 60%; 
    background-color: green; 
    box-sizing: border-box; 
} 

Answer 2

좋아, 내가 폭 단위보다는 뷰포트를 뷰포트의 높이를 설정하여 할 거라고 비율 (의 폭에 연결된 상자의 높이가해야 할 것 높이 - 내 예제에서는 75 %로 설정했습니다.) 그렇게하면 상자가 최대 높이 또는 최소 높이로 구속되지 않을 때 프로에 남아있게됩니다.

html, 
body { 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
    background-color: #00ff00; 
} 

.box { 
    width: 100%; 
    height: 75vw; 
    max-height: 100vh; 
    min-height: 400px; 
    background-color: #ff0000; 
}