w3.css

종횡비

CSS를 사용하여 요소의 종횡비를 유지하는 방법을 알아보자.

크기 조절 시 종횡비(4:3, 16:9 등)를 유지하는 유연한 요소를 만든다.

요소의 종횡비는 너비와 높이 사이의 비례 관계를 설명한다.
두 가지 일반적인 비디오 종횡비는 4:3(20세기의 보편적 비디오 형식)과 16:9(HD 텔레비전 및 유럽 디지털 텔레비전의 보편적이며 YouTube 비디오의 기본)이다.

종횡비

1단계) HTML 추가

<div class="container">
  <div class="text">Some text</div> <!-- If you want text inside the container -->
</div>

1:1 화면비

패딩 상단에 백분율 값을 추가하여 DIV의 종횡비를 유지한다. 다음 예제는 가로 세로 비율을 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) */
}

가로 세로 비율 CSS 속성

최신 브라우저에서는 CSS 가로 세로 비율 속성을 사용하면 된다.

3:2 화면 비율

.container {
  aspect-ratio: 3 / 2;
}

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기