이미지를 내려받기 전에 비율을 알려주면 뒤의 글이 갑자기 밀려나는 일을 줄일 수 있다. 이미지의 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를 같은 폴더에 둔다. 대체 텍스트도 파일에 맞춘다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>이미지가 뜨기 전에 자리 남기기</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font-family: sans-serif;
line-height: 1.6; color: #222; background: #fff; }
main { max-inline-size: 60rem; margin-inline: auto; }
h1 { font-size: 1.7rem; line-height: 1.3; }
a { color: #174fa0; }
:focus-visible { outline: 3px solid #174fa0; outline-offset: 3px; }
img { display: block; inline-size: 100%; block-size: auto; }
</style>
</head>
<body>
<main>
<h1>이미지가 뜨기 전에 자리 남기기</h1>
<img src="whole.png" width="1200" height="800"
alt="벽에 걸린 직사각형 종이 작업">
<p id="after">이미지가 오기 전에도 이 문장의 자리가 남아 있다.</p>
</main>
</body>
</html>개발자 도구에서 이미지 요청을 늦추고 아래 문장의 위치를 확인한다. 파일과 다른 비율을 적으면 로딩 뒤 다시 배치될 수 있다. 박스 모델의 테두리와 여백은 이미지 비율 바깥의 공간을 더한다. 이 문제를 폰트나 광고 등으로 넓히면 레이아웃 이동을 살피게 된다.