https://velog.io/@planic324/Aspect-Ratio를-알아보자

📌 aspect-ratio 속성값 설명

aspect-ratio는 CSS에서 요소의 가로와 세로 비율을 지정하는 속성입니다.
비율 값은 가로:세로 형태로 설정되며, 주로 사용되는 값들은 다음과 같습니다.

🎯 자주 사용하는 aspect-ratio 값

✅ 16 / 9 (와이드스크린 비율)

• 설명: 현대 TV, 모니터, 유튜브 영상 등에서 가장 많이 사용되는 비율
• 사용 예시

  css 
  
   
  .video {
    aspect-ratio: 16 / 9;
  }
   
   

• 예제 해석: 너비가 16일 때 높이는 9로 설정됨.

✅ 4 / 3 (전통적인 화면 비율)

• 설명: 예전 CRT 모니터, SDTV(구형 TV)에서 많이 쓰던 비율
• 사용 예시

  css
  복사편집
  .old-tv {
    aspect-ratio: 4 / 3;
  }
  
  ✅ 1.5 (3:2 비율과 동일)
  설명: DSLR 카메라 사진, 일부 태블릿 화면에서 사용됨
  
  
  사용 예시
  css
  복사편집
  .photo {
    aspect-ratio: 3 / 2;
  }
  참고: aspect-ratio는 소수점 값을 지원하므로 1.5로도 설정 가능.
  ✅ 1 / 1 (정사각형)
  설명: 인스타그램 썸네일, 프로필 사진 등에서 주로 사용됨
  
  사용 예시
  css
  복사편집
  .square {
    aspect-ratio: 1 / 1;
  }