# 이미지 관련 속성 (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 중 더 작은 크기로 적용
```css
img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}
```
## object-position
이미지가 컨테이너 안에서 어떻게 배치될지 설정
```css
img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: top;
}
```
## filter
이미지 필터 효과 적용
```css
img {
  filter: grayscale(100%) blur(2px);
} /* 이미지를 흑백 + 약간 흐릿하게 변경! */
```

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