미디어 영역의 비율을 안정적으로 유지하고 이미지 맞춤 방식을 선택합니다.
aspect-ratio는 너비나 높이 중 하나가 자동일 때 선호 비율을 제공합니다. object-fit:cover는 비율을 유지하며 영역을 채우기 위해 일부를 자르고, contain은 전체 이미지가 보이도록 여백을 남길 수 있습니다. HTML img의 width와 height 속성도 초기 비율 계산과 레이아웃 이동 방지에 중요합니다.
img에 적은 width와 height 속성 800, 500은 이미지가 오기 전에 자리를 잡아 주지만, 그대로 두면 CSS의 height: 500px처럼 작동해 aspect-ratio가 쓰일 틈이 없습니다. 그래서 .course-cover가 width: 100%와 함께 height: auto를 주고, 그때부터 aspect-ratio: 16/9가 폭에 맞는 높이를 계산합니다. 원본은 8:5라 16:9 상자보다 세로가 길어서 object-fit: cover가 위아래를 조금 잘라 상자를 채웁니다.
화면 밖의 출력 환경이나 크기가 정해진 미디어를 다룰 때 사용합니다. 원본 비율, 잘림, 인쇄 결과처럼 일반 화면에서 놓치기 쉬운 조건을 별도로 시험하세요.
cover는 이미지 일부를 자르므로 글자가 들어간 이미지나 핵심 피사체가 잘리지 않는지 확인해야 합니다.
직접 바꿔보세요cover와 contain을 비교하고 aspect-ratio를 1/1로 바꾸세요.