방법 - 종횡비
CSS로 요소의 종횡비를 유지하는 방법을 알아보세요.
종횡비
크기를 조정할 때 가로 세로 비율(4:3, 16:9 등)을 유지하는 유연한 요소를 만듭니다.
가로 세로 비율이란 무엇입니까?
요소의 종횡비는 요소의 너비와 높이 사이의 비례 관계를 나타냅니다. 두 가지 일반적인 비디오 종횡비는 4:3(20세기의 보편적인 비디오 형식)과 16:9(HD 텔레비전 및 유럽 디지털 텔레비전의 경우 보편적이고 YouTube 비디오의 기본값)입니다.
방법 - 너비와 높이가 같음
1단계) HTML 추가:
<div> 와 같은 컨테이너 요소를 사용하고 그 안에 텍스트가 필요한 경우 자식 요소를 추가합니다.
예시
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
2단계) CSS 추가:
padding-top
DIV의 종횡비를 유지하려면 에 대한 백분율 값을 추가하십시오 . 다음 예는 1:1의 종횡비를 생성합니다(높이와 너비는 항상 동일함).
예 1:1 종횡비
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
다른 종횡비:
예 16:9 종횡비
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
예 4:3 종횡비
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
예 3:2 종횡비
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
예 8:5 종횡비
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}