CSS의 크기를 조정할 때 CSS의 너비와 높이를 모두 조정하려면

Question

CSS의 크기를 조정하여 브라우저의 크기와 상관 관계가있는 div의 너비와 높이를 조정할 수있는 방법은 무엇입니까? 이미 너비 크기 조정을 완료했지만 상관 관계에서 높이 크기를 조정하는 방법을 찾을 수 없습니다.

Answer 1

사용 뷰포트 비율 길이 :

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

뷰포트-비율 길이는 블록을 포함하는 초기의 크기를 기준으로합니다. 초기 포함 블록의 높이 또는 너비가 변경되면 그에 따라 크기가 조정됩니다. 당신은 가로 세로 비율을 유지하는 사각형을 만들고 싶었 경우

, 당신은 사용할 수 있습니다

Example Here

.maintain-aspect-ratio { 
    width: 25%; 
    height: 25vw; 
} 

이 길이는 대부분의 최신 브라우저에서 지원됩니다 - support can be found here합니다. 당신이 더 많은 브라우저를 지원하는 대안을 원하는 경우

---

, 당신은 항상 가로 세로 비율을 유지하기 위해 padding-top trick를 사용할 수 있습니다.

Alternative Example

.maintain-aspect-ratio { 
    position: relative; 
    width: 25%; 
    background: red; 
} 
.maintain-aspect-ratio:before { 
    content: ''; 
    display: block; 
    padding-top: 100%; /* 1:1 ratio */ 
}