css-examples/docs/16_이미지.md

이미지 관련 속성 (img, picture, video)

속성	설명	옵션
width / height	요소의 크기 설정	auto
max-width / max-height	요소의 최대 크기 지정	none, inherit
min-width / min-height	요소의 최소 크기 지정	none, inherit
opacity	이미지 투명도 조절
object-fit	이미지/비디오가 박스에 맞게 조절되는 방식	fill, contain, cover, none, scale-down
object-position	이미지/비디오의 위치 조정	left top, center center, right bottom, %
filter	이미지 필터 효과 적용	blur(), brightness(), grayscale(), contrast()
aspect-ratio	가로 세로 비율 유지	16 / 9, 4 / 3, 1 / 1

object-fit

컨테이너 안에서 이미지가 어떻게 맞춰질지 결정

• fill (기본값): 이미지가 컨테이너에 완전히 채워짐 (비율 무시)
• contain: 이미지가 컨테이너 안에 비율 유지하며 맞춤
• cover: 컨테이너를 완전히 덮되, 비율 유지
• none: 이미지 크기 그대로 유지 (잘릴 수도 있음)
• scale-down: none 또는 contain 중 더 작은 크기로 적용

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

object-position

이미지가 컨테이너 안에서 어떻게 배치될지 설정

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: top;
}

filter

이미지 필터 효과 적용

img {
  filter: grayscale(100%) blur(2px);
} /* 이미지를 흑백 + 약간 흐릿하게 변경! */

aspect-ratio

비율 유지

img {
  aspect-ratio: 16 / 9;
} /* 이미지가 16:9 비율을 유지하면서 크기가 조정됨! */