그림을 칸에 맞추기: aspect-ratio·object-fit

aspect-ratio는 상자의 가로:세로 비율을 정하고, object-fit은 그 칸에 사진을 어떻게 넣을지 정합니다. 사진 칸을 aspect-ratio: 4 / 3으로 맞추고 object-fit: cover를 주면, 크기가 제각각인 사진도 찌그러지지 않고 칸을 꽉 채운 뒤 넘친 곳만 잘립니다.

레시피 카드에 넣을 사진은 세로로 긴 것, 가로로 긴 것, 정사각형이 섞여 있습니다. 유연한 그림의 height: auto는 사진마다 제 비율을 지켜 주지만, 그러면 카드마다 사진 높이가 달라 줄이 들쭉날쭉합니다. 이 레슨은 사진 칸의 비율을 하나로 맞추는 법과, 맞춘 칸에 사진을 넣는 세 방식을 봅니다.

그림 준비 중

1비율이 다른 사진은 높이가 제각각이다

가로 사진(400 × 300)과 세로 사진(300 × 400)을 같은 너비 90px로 놓습니다.

<div class="row">
  <img
    src="images/wide.webp"
    width="400"
    height="300"
    alt="김치볶음밥"
  />
  <img
    src="images/tall.webp"
    width="300"
    height="400"
    alt="떡볶이"
  />
</div>

.row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

img {
  width: 90px;
  height: auto;
}

height: auto라 높이가 사진마다 제 비율대로 셈해져 67.5px과 120px로 갈렸습니다. 정사각 사진이면 또 다른 높이(90px)입니다.

2aspect-ratio — 칸의 비율을 정한다

aspect-ratio: 4 / 3은 '너비 4에 높이 3'입니다. 1절의 두 사진에 주면 너비 90px의 칸이 모두 90 × 3 ÷ 4 = 67.5px 높이가 됩니다. 세로 사진 하나를 너비 200px로 크게 그려 봅니다.

<img
  src="images/tall.webp"
  width="300"
  height="400"
  alt="떡볶이"
/>

img {
  width: 200px;
  height: auto;
  aspect-ratio: 4 / 3;
}

칸은 200 × 150으로 맞았지만, 세로 사진이 옆으로 퍼지게 찌그러졌습니다. 둥근 떡볶이 접시가 납작한 타원이 되었습니다. 사진을 칸에 넣는 방식 object-fit의 처음 값이 fill — 칸에 맞게 사진을 늘리고 줄이기 때문입니다.

aspect-ratio는 너비나 높이 가운데 하나가 auto일 때만 나머지를 셈합니다. 그래서 height: auto를 함께 둡니다.

3object-fit — 칸에 사진을 넣는 방식

<img
  src="images/tall.webp"
  width="300"
  height="400"
  alt="떡볶이"
/>

img {
  width: 200px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

cover는 사진 비율을 지킨 채 칸을 꽉 채우고, 칸 밖으로 넘친 곳을 잘라 냅니다. 칸보다 세로로 길쭉한 사진은 위아래가, 칸보다 가로로 길쭉한 사진은 양옆이 잘립니다. 떡볶이 사진은 위쪽의 김밥 접시와 아래쪽의 포크가 잘려 나갔습니다. 칸 크기(200 × 150)는 그대로입니다.

object-fit은 칸 크기를 바꾸지 않고 칸 안에 그리는 모양만 바꿉니다. 그래서 사진 비율이 칸과 같으면 세 값이 똑같이 보입니다. 1절의 김치볶음밥(4:3)은 4:3 칸에서 어느 값이든 꽉 차고, 잘리는 곳도 없습니다.

잘리는 자리는 object-position으로 고릅니다 — 처음 값은 가운데(50% 50%)이고, object-position: top이면 위쪽을 남기고 아래를 자릅니다.

이 레슨도 사진(webp)을 씁니다. 과목의 음식 그림 같은 SVG는 fill이어도 찌그러지지 않고 빈 띠를 남겨 contain과 같아 보입니다 — 찌그러짐과 잘림은 사진으로 확인합니다.

aspect-ratio와 object-fit은 주요 브라우저가 모두 지원한 지 2년 반이 넘어 널리 쓸 수 있는 기능입니다(MDN Baseline — object-fit은 2022년 7월, aspect-ratio는 2024년 3월부터).

예제

레시피 카드의 사진 칸

카드 너비 200px에 세로 사진을 4:3 칸으로 채웁니다.

<div class="recipe-card">
  <img
    src="images/tall.webp"
    width="300"
    height="400"
    alt="떡볶이"
  />
  <h2>떡볶이</h2>
</div>

.recipe-card {
  width: 200px;
}

.recipe-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

• 사진 칸은 카드 너비 200px에 4:3이라 200 × 150입니다. 세로 사진은 칸을 채우고 위아래가 잘렸습니다.
• 카드마다 사진 비율이 달라도 사진 칸은 모두 200 × 150이라 카드 줄이 가지런합니다.
• 사진이 카드보다 늘 커서 width: 100%로 칸을 채웁니다. 작은 그림을 키우지 않으려면 유연한 그림처럼 max-width를 씁니다.

자주 틀리는 곳

틀린 생각: object-fit은 사진을 담은 부모 상자에 준다.

<div class="photo">
  <img
    src="images/tall.webp"
    width="300"
    height="400"
    alt="떡볶이"
  />
</div>

.photo {
  width: 200px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

img {
  width: 100%;
  height: auto;
}

사진은 제 비율대로 266.66px 높이로 다 보입니다. object-fit은 물려받지 않는 속성이라 부모에 준 값이 img에 닿지 않았습니다. 부모의 aspect-ratio도 사진 칸을 만들지 못합니다. aspect-ratio로 높이를 정한 상자는 내용이 더 길면 그만큼 늘어나, .photo가 사진을 다 담았습니다.

맞는 규칙: object-fit은 칸 안에 그려지는 img에 줍니다. 칸의 비율(aspect-ratio)도 img에 함께 줍니다.

틀린 생각: 칸을 채우면 사진의 중요한 곳도 늘 보인다.

cover는 가운데를 남기고 넘친 곳을 자르므로, 세로 사진의 위쪽에 있는 음식이 잘릴 수 있습니다. 3절에서 떡볶이 사진 위쪽의 김밥 접시가 그렇게 잘렸습니다.

<img
  src="images/tall.webp"
  width="300"
  height="400"
  alt="떡볶이"
/>

img {
  width: 200px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

김밥 접시가 다시 보이고, 이번에는 떡볶이 접시의 아래쪽이 잘렸습니다.

맞는 규칙: 남길 자리는 object-position으로 고릅니다. top은 가로 가운데 · 세로 맨 위(50% 0%)를 남깁니다.

틀린 생각: CSS에 aspect-ratio를 주면 HTML의 width · height 비율은 상관없다.

<img
  src="images/tall.webp"
  width="300"
  height="400"
  alt="떡볶이"
/>

img {
  width: 200px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

칸이 200 × 400입니다. HTML의 height="400"이 높이를 정해 두어, 너비 · 높이가 모두 정해진 칸에서는 aspect-ratio가 셈할 것이 없습니다.

맞는 규칙: CSS height: auto가 HTML의 높이를 이겨야 aspect-ratio가 높이를 셈합니다. 우리 CSS 선언은 HTML의 크기 값을 이깁니다(브라우저 규칙 5).

확인 문제

1. 예제의 사진 칸 비율을 aspect-ratio: 1 / 1로 바꾸면, 사진 칸의 크기는 어떻게 될까요?

• ① 200 × 150
• ② 200 × 200
• ③ 200 × 266.66

<div class="recipe-card">
  <img
    src="images/tall.webp"
    width="300"
    height="400"
    alt="떡볶이"
  />
</div>

.recipe-card {
  width: 200px;
}

.recipe-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

2. 레시피 카드 사진 칸을 가로 16:세로 9로 맞추려고 합니다. ____ 자리를 채우세요.

.recipe-card img {
  width: 100%;
  height: auto;
  aspect-ratio: ____;
  object-fit: cover;
}

3. 요리 동아리 공지 카드에 지난 모임 사진을 4:3 칸으로 싣습니다. 사진이 찌그러지지 않고, 어느 곳도 잘리지 않고 다 보여야 합니다. object-fit에 줄 값을 고르세요.

<img
  src="images/square.webp"
  width="300"
  height="300"
  alt="된장찌개"
/>

img {
  width: 200px;
  height: auto;
  aspect-ratio: 4 / 3;
}

• ① cover
• ② contain
• ③ fill

<img
  src="images/square.webp"
  width="300"
  height="300"
  alt="된장찌개"
/>

img {
  width: 200px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제 코드를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣고, 아래 사진을 images 폴더에 둡니다). object-fit: cover를 contain으로 바꾸고 저장 · 새로고침해, 사진 칸 안 어디에 빈 띠가 생기는지 먼저 적은 뒤 맞춰 봅니다.

• tall.webp 받기