[box] CSS - aspect-ratio 속성 - 요소의 종횡비율(= 가로세로비율) 지정 (= aspect-ratio속성 = 애스펙트레이시오속성)

1. aspect-ratio 예제 - 요소의 종횡비 지정
2. aspect-ratio 정의
3. aspect-ratio 구문
4. aspect-ratio 예제 - grid 시스템에서 width 미지정 경우
5. aspect-ratio 예제 - 종횡비 비율별 요소 크기 변화 확인

aspect-ratio 예제 - 요소의 종횡비 지정

 

<style>

div {

    background-color: yellow;

    width: 100px;

    aspect-ratio: 3/2;

    display: flex;

    justify-content: center;

    align-items: center;

}

</style>

<div>홈짱닷컴</div>

 

결과보기

aspect-ratio 정의

 

요소의 종횡비율(= 가로세로비율) 지정.

 

---

 

1.

• (aspect-ratio / width) 속성값 지정 시, height 속성값 자동 결정됨.
• (너비/높이) 비율 유지하며 요소 크기 달라지는 반응형 레이아웃에 사용.

 

2.

• 기본값: auto
• 상속여부: X
• 애니가능: O
• CSS버전: CSS3
• JS구문: object.style.aspectRatio="16/9";

 

3.

주요 최신 브라우저 모두 지원. (단, IE는 지원 X)

 

4. MDN aspect-ratio 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

 

aspect-ratio 구문

 

selector {aspect-ratio: widthRatio/heightRatio|initial|inherit;}

 

---

[속성값]

 

widthRatio

필수. 가로 비율 나타내는 숫자. (※ 정수/소수 둘 다 가능.)

 

heightRatio

선택. 세로 비율 나타내는 숫자. (※ 미지정 시 기본값: 1)

 

initial

이 속성의 기본값으로 사용.

 

inherit

부모요소의 속성값을 상속.

 

aspect-ratio 예제 - grid 시스템에서 width 미지정 경우

 

<style>

#box {

  display: grid;

  width: 80%;

  margin: auto;

  border: 1px solid black;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 10px;

  padding: 10px;

}

  

#box > div {

  aspect-ratio: 1 / 0.8;

}

#box > div > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}

</style>

<div id="box">

  <div><img src="https://i.imgur.com/57sBeiJ.gif" alt="happy"></div>

  <div><img src="https://i.imgur.com/57sBeiJ.gif" alt="happy"></div>

  <div><img src="https://i.imgur.com/57sBeiJ.gif" alt="happy"></div>

  <div><img src="https://i.imgur.com/57sBeiJ.gif" alt="happy"></div>

</div>

 

결과보기

aspect-ratio 예제 - 종횡비 비율별 요소 크기 변화 확인

 

<style>

div {

    background-color: tomato;

    width: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom:10px;

}

.ar1 {aspect-ratio: 1/1;}

.ar2 {aspect-ratio: 1/2;}

.ar3 {aspect-ratio: 4/3;}

.ar4 {aspect-ratio: 16/9;}

.ar5 {aspect-ratio: 0.5;}

.ar6 {aspect-ratio: 1;}

.ar7 {aspect-ratio: 2;}

</style>

<div class="ar1">1/1</div>

<div class="ar2">1/2</div>

<div class="ar3">4/3</div>

<div class="ar4">16/9</div>

<div class="ar5">0.5</div>

<div class="ar6">1</div>

<div class="ar7">2</div>

결과보기