미디어 영역의 비율을 안정적으로 유지하고 이미지 맞춤 방식을 선택합니다.
aspect-ratio는 너비나 높이 중 하나가 자동일 때 선호 비율을 제공합니다. object-fit:cover는 비율을 유지하며 영역을 채우기 위해 일부를 자르고, contain은 전체 이미지가 보이도록 여백을 남길 수 있습니다. HTML img의 width와 height 속성도 초기 비율 계산과 레이아웃 이동 방지에 중요합니다.
이번 예제의 출발점은 aspect-ratio:16 / 9; object-fit:cover;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
화면 밖의 출력 환경이나 크기가 정해진 미디어를 다룰 때 사용합니다. 원본 비율, 잘림, 인쇄 결과처럼 일반 화면에서 놓치기 쉬운 조건을 별도로 시험하세요.
처음에는 예제를 그대로 확인한 다음 cover와 contain을 비교하고 aspect-ratio를 1/1로 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
cover는 이미지 일부를 자르므로 글자가 들어간 이미지나 핵심 피사체가 잘리지 않는지 확인해야 합니다.
직접 바꿔보세요cover와 contain을 비교하고 aspect-ratio를 1/1로 바꾸세요.