비율 유지 방법

CSS를 사용하여 요소의 너비와 높이 비율을 유지하는 방법을 배우십시오。

높이가 너비와 같게 만드는 방법

第一步 - HTML 추가:

컨테이너 요소를 사용하여 예를 들어 <div>만약 그 안에 텍스트가 들어가기를 원하시면, 서브 요소를 추가하세요:

<div class="container">
  <div class="text">Some text</div> <!-- 컨테이너 내에 텍스트가 있기를 원하시면 -->
</div>

第二步 - CSS 추가:

에 대해 padding-top 백분율 값을 추가하여 DIV의 가로세로 비율을 유지하세요. 다음 예시는 가로세로 비율이 1:1인 DIV(높이와 너비가 항상 같습니다)을 생성합니다:

예시 - 1:1 가로세로 비율

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 가로세로 비율 */
  position: relative; /* 내부에 텍스트가 있기를 원하시면 */
}
/* 컨테이너 내에 텍스트가 있기를 원하시면 */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

직접 시험해 보세요

다른 가로세로 비율

예시 - 16:9 가로세로 비율

.container {
  padding-top: 56.25%; /* 16:9 가로세로 비율(9 나누어 16이 0.5625입니다) */
}

직접 시험해 보세요

예시 - 4:3 가로세로 비율

.container {
  padding-top: 75%; /* 4:3 가로세로 비율(3 나누어 4가 0.75입니다) */
}

직접 시험해 보세요

예시 - 3:2 가로세로 비율

.container {
  padding-top: 66.66%; /* 3:2 가로세로 비율(2 나누어 3이 0.6666입니다) */
}

직접 시험해 보세요

예시 - 8:5 가로세로 비율

.container {
  padding-top: 62.5%; /* 8:5 가로세로 비율(5 나누어 8이 0.625입니다) */
}

직접 시험해 보세요

CSS aspect-ratio 속성

최신 브라우저에서는 간단히 CSS를 사용할 수 있습니다 aspect-ratio 속성:

예시 - 3:2 가로세로 비율

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

직접 시험해 보세요

표에서는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다。