• 목록

CSS image 반응형 만들기

CSS 이미지를 반응형으로 만드는 핵심은 이미지가 부모 요소의 너비를 넘지 않으면서, 화면 크기에 따라 비율을 유지하며 유동적으로 변하게 하는 것입니다.

1. 기본형: 가변 이미지 (Fluid Images)

이미지가 화면(또는 부모 박스)보다 클 때 밖으로 빠져나가지 않도록 설정하는 가장 일반적인 방법입니다.

• max-width: 100%: 이미지의 원래 크기보다 커지지는 않되, 부모 요소가 이미지보다 작아지면 부모 너비에 맞춰 줄어듭니다.

• height: auto: 너비가 변할 때 원본 가로세로 비율(Aspect Ratio)을 유지하여 이미지가 찌그러지지 않게 합니다.

2. 영역에 꽉 채우기 (object-fit)

이미지의 가로세로 비율이 고정된 박스와 다를 때, 이미지를 어떻게 채울지 결정합니다. (background-size와 유사한 역할)

• cover: 이미지 비율을 유지하면서 박스를 가득 채웁니다. (일부 잘릴 수 있음)

• contain: 이미지 전체가 다 보이도록 박스 안에 맞춥니다. (여백이 생길 수 있음)

3. 배경 이미지 반응형 (background-size)

<img> 태그가 아닌 CSS 배경으로 이미지를 넣었을 때 사용합니다.

• background-size: cover: 배경을 요소에 꽉 채웁니다.

• background-position: center: 화면이 줄어들어도 이미지의 중심이 보이도록 고정합니다.

4. 반응형 이미지 예시 코드

/* 가장 많이 사용하는 반응형 이미지 기본형 */
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block; /* 하단 여백 제거 */
}

/* 특정 높이의 카드 안에서 이미지를 꽉 채울 때 */
.card-thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

• 목록