이미지를 내려받기 전에 비율을 알려주면 뒤의 글이 갑자기 밀려나는 일을 줄일 수 있다. 이미지의 `width`와 `height`를 적고 CSS에서 표시할 폭과 높이의 관계를 유지한다.
- HTML에는 이미지의 실제 너비와 높이를 적는다. 웹 브라우저는 이 값으로 파일이 오기 전에도 비율을 계산할 수 있다.
- `inline-size: 100%`와 `block-size: auto`는 가로쓰기에서 상자의 폭에 맞춰 높이를 조정한다. HTML의 1200픽셀은 화면을 반드시 1200픽셀로 채우라는 뜻이 아니다.
- 고정된 비율로 잘라 보여주는 상자는 `aspect-ratio`와 `object-fit`을 쓸 수 있다. 작품 전체를 보존해야 한다면 자르는 방식이 맞는지 먼저 살핀다.
## 작은 예제
아래 코드를 UTF-8 형식의 `example-03.html`로 저장해 웹 브라우저에서 연다. 1200×800픽셀 이미지 `whole.png`를 같은 폴더에 둔다. 대체 텍스트도 파일에 맞춘다.
```html
이미지가 뜨기 전에 자리 남기기
이미지가 뜨기 전에 자리 남기기
이미지가 오기 전에도 이 문장의 자리가 남아 있다.
```
개발자 도구에서 이미지 요청을 늦추고 아래 문장의 위치를 확인한다. 파일과 다른 비율을 적으면 로딩 뒤 다시 배치될 수 있다. [[박스 모델]]의 테두리와 여백은 이미지 비율 바깥의 공간을 더한다. 이 문제를 폰트나 광고 등으로 넓히면 [[레이아웃 이동]]을 살피게 된다.
## 참고
- [MDN: img의 너비와 높이](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img)
#HTML #CSS #이미지