Grid와 object-fit으로 크기가 다른 이미지를 일정하게 배치합니다.
갤러리는 Grid로 열을 정의하고 이미지 컨테이너에 aspect-ratio를 줄 수 있습니다. object-fit:cover는 비율을 유지하며 상자를 채우되 일부가 잘릴 수 있습니다.
이번 예제의 출발점은 img { width:100%; aspect-ratio:4/3; object-fit:cover; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 aspect-ratio를 4/3으로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
중요한 이미지가 cover로 잘릴 때 object-position이나 contain을 검토하세요.
직접 바꿔보세요aspect-ratio를 4/3으로 바꿔보세요.