이미지 비율 유지하기
웹 디자인에서 이미지의 비율을 유지하는 것은 레이아웃의 일관성과 시각적인 아름다움을 위해 중요합니다. CSS를 사용하여 이미지 비율을 유지하는 두 가지 주요 방법을 살펴보겠습니다.
1. aspect-ratio 속성 사용하기
요소의 기본 가로세로 비율을 설정합니다.
이 속성은 대부분의 최신 브라우저에서 지원되지만, Safari의 경우 버전 15부터 지원되기 시작했으며 Internet Explorer에서는 지원되지 않습니다. 그럼에도 불구하고, 이 속성은 이미지 비율 유지를 위한 가장 직관적이고 간단한 방법입니다. 오래된 브라우저를 고려해야 하는 경우에는 대체 방법을 함께 사용하는 것이 좋습니다.
이 예제에서는 이미지의 너비를 300px로 설정하고, aspect-ratio 속성을 사용하여 가로와 세로의 비율을 2:1로 지정합니다. 그리고 object-fit: cover 속성을 사용하여 이미지가 설정된 비율을 유지하면서 요소를 꽉 채우도록 합니다. 이렇게 하면 다양한 크기의 이미지들도 일관된 비율과 크기로 표시할 수 있습니다.
다양한 비율의 이미지를 확인하고 싶다면 코드의 aspect-ratio 속성값을 조정해보세요.
2. padding 백분율 값 활용하기
padding의 백분율 값은 항상 부모 요소의 너비를 기준으로 계산됩니다. 이 특성을 이용하여 반응형 이미지 컨테이너를 만들 수 있습니다.
2.1 작동 원리
.thumbnail의height: 0은 요소의 높이 값을 0으로 초기화합니다. 이는 padding만으로 높이를 제어하기 위함입니다.
padding-top: 50%는 컨테이너의 높이를 너비의 50%로 설정합니다. 이 값을 조절하여 원하는 비율을 만들 수 있습니다.
- 이미지는
position: absolute로 설정되어 컨테이너를 꽉 채웁니다. 이 때 이미지의 원래 비율이 설정한 비율과 일치하지 않으면 이미지가 왜곡될 수 있습니다.
- 이러한 왜곡을 방지하기 위해
object-fit: cover를 사용합니다. 이 속성은 이미지가 컨테이너를 꽉 채우면서도 원래의 비율을 유지하도록 합니다.
3. [실습] 다양한 크기의 이미지 동일한 비율로 만들기
실습을 통해 다양한 크기의 이미지를 동일한 비율로 표시하는 방법을 익혀봅시다. 아래 이미지들을 다운받아 사용해주세요.
실습용 이미지
다양한 크기와 비율의 캐릭터 이미지들이 1. 모두 동일한 크기의 정사각형이 되도록 2. 2:1 비율의 사각형이 되도록 앞서 배운 두가지 방법을 사용해서 실습해주세요.