CSS 강좌 / 이미지와 동영상 크기·비율 맞추기

이미지와 동영상을 원래 비율로 줄이려면 폭을 제한하고 높이는 자동으로 계산하게 합니다. 썸네일처럼 일정한 표시 비율이 필요하면 aspect-ratio로 영역을 정하고 object-fit으로 원본을 채우거나 전체가 보이게 맞춥니다. 영역의 비율과 그 안에 들어가는 영상의 비율은 서로 다른 값일 수 있습니다.

원본 크기와 화면의 표시 크기 구분하기

원본이 400×300이면 비율은 4:3입니다. 표시 폭이 288px이고 같은 비율을 유지하면 표시 높이는 216px입니다. HTML의 width와 height는 이미지의 크기·비율 정보를 제공하고, CSS는 페이지에서 표시할 크기를 조절합니다. HTML의 크기 속성을 지우는 것으로 문제를 해결하기보다 CSS에서 어떤 값을 덮어쓰는지 확인하세요.

img { max-width: 100%; height: auto; }
/* 폭이 작은 원본을 억지로 키우지 않고 부모에 맞춰 줄입니다. */

max-width: 100%는 부모보다 넓어지는 것을 막는 상한이며 작은 원본을 무조건 늘리지 않습니다. width: 100%는 부모 폭을 채우는 지정이므로 원본보다 확대될 수 있습니다. 사진의 선명도와 다운로드 크기는 별도 문제입니다. CSS로 작게 보여도 큰 파일을 내려받을 수 있고, srcset·sizes를 쓰면 브라우저가 후보 중 이미지를 선택하므로 화면의 표시 크기와 실제 선택된 파일을 구분해서 확인해야 합니다.

aspect-ratio는 크기 계산의 비율을 정하기

aspect-ratio: 16 / 9는 가로 16에 세로 9의 비율을 크기 계산에 사용하게 합니다. 가로가 288px이면 세로는 162px입니다. 적어도 한쪽 크기가 자동이어야 비율에 따른 계산이 가능하며, 폭과 높이를 모두 고정하면 이 속성을 넣어도 그 고정 크기가 우선합니다. MDN의 aspect-ratio 크기 계산 조건도 확인할 수 있습니다.

.thumbnail { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }

Flex 배치의 기본 교차축 늘림은 같은 줄의 이미지 높이를 맞출 수 있습니다. 원본 비율이 다른 이미지를 나란히 놓으면서 높이를 자동으로 계산하려면 부모의 align-items: flex-start나 해당 아이템의 align-self도 함께 확인하세요. 높이만 auto로 바꾼 뒤 비율이 그대로라고 느껴질 때는 부모의 정렬 규칙이 원인일 수 있습니다.

실습에서는 box-sizing을 border-box로 통일합니다. 테두리나 안쪽 여백을 추가하면 크기와 비율을 어느 상자 기준으로 측정하는지도 중요해집니다. 아래 비교 예제의 이미지에는 이를 혼동하지 않도록 테두리와 안쪽 여백을 넣지 않았습니다.

cover와 contain의 차이, 잘리는 위치 정하기

4:3 원본을 16:9 영역에 cover로 넣으면 같은 폭 기준에서 위아래가 잘립니다. 가운데 정렬이면 위쪽과 아래쪽을 나누어 자르고, object-position: center top이면 위쪽을 보존하고 아래쪽을 더 자릅니다. 인물의 얼굴이나 제품의 중요한 부분이 가장자리에 있다면 cover를 선택한 뒤 잘리는 위치까지 확인해야 합니다.

다음 그림은 동일한 실습 원본을 원본 비율, cover, contain, 위쪽 정렬 cover로 표시한 결과입니다. 녹색 띠와 붉은 띠가 남는지, 빈 공간이 생기는지를 비교하세요. 가운데 원은 이 예제에서 잘리는 구간을 피하므로 띠가 더 분명한 확인 기준입니다.

전체 예제: 같은 그림으로 네 가지 결과 비교하기

image-ratio.html로 저장해 여세요. 원본 그림을 파일 안에 SVG 데이터로 포함했으므로 외부 이미지는 필요 없습니다. 각 그림의 width와 height 속성은 원본의 400×300 정보를 유지하고, CSS로 화면 크기와 표시 비율을 정합니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>image-ratio.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
main { width: min(100%, 65rem); margin-inline: auto; padding: 1rem; }
.gallery { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.sample { width: min(100%, 18rem); margin: 0; }
.sample img { display: block; width: 100%; height: auto; background: #e2e2e2; }
.sample p { margin: .5rem 0 0; } .cover, .contain { aspect-ratio: 16 / 9; }
.cover { object-fit: cover; } .contain { object-fit: contain; }
.top { object-position: center top; }
</style>
</head>
<body>
<main><h1>같은 그림의 크기와 잘림 비교</h1><div class="gallery"><div class="sample"><img class="" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="위쪽 녹색 띠, 아래쪽 붉은 띠와 가운데 주황색 원"><p>원본 4:3</p></div>
<div class="sample"><img class="cover" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="위쪽 녹색 띠, 아래쪽 붉은 띠와 가운데 주황색 원"><p>16:9 cover, 가운데</p></div>
<div class="sample"><img class="contain" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="위쪽 녹색 띠, 아래쪽 붉은 띠와 가운데 주황색 원"><p>16:9 contain</p></div>
<div class="sample"><img class="cover top" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="위쪽 녹색 띠, 아래쪽 붉은 띠와 가운데 주황색 원"><p>16:9 cover, 위쪽</p></div>
</div></main>
</body>
</html>

1. 넓은 화면에서 각 그림의 폭이 18rem에 제한되는지 확인합니다. 루트 글꼴 16px에서는 폭 288px이며 원본은 높이 216px, 나머지 16:9 영역은 높이 162px입니다.
2. .sample img의 height만 300px로 바꿉니다. 16:9 비율이 적용되어도 고정 높이 때문에 영역이 288×300px이 되는 것을 확인한 뒤 auto로 복구합니다.
3. .gallery의 align-items만 stretch로 바꿉니다. 같은 줄의 래퍼 높이는 같아지지만 래퍼 안의 이미지 비율은 유지되는지 확인하고 flex-start로 되돌립니다. 이 예제에서 Flex 아이템은 이미지가 아닌 sample 래퍼입니다. 이미지를 직접 Flex 아이템으로 놓는 구성에서는 자동 높이가 늘어날 수 있으므로 정렬까지 확인해야 합니다.
4. .top의 object-position만 center bottom으로 바꿉니다. 이번에는 붉은 띠가 남고 녹색 띠가 잘리는지 확인한 뒤 center top으로 복구합니다.

예제의 SVG는 자체적으로 도형의 비율을 유지하는 특성도 있습니다. 이미지 요소의 표시 영역이 잘못되어 빈 공간이 생겨도 원이 반드시 찌그러지는 것은 아닙니다. 눈으로 도형만 보는 대신 개발자 도구에서 img 요소의 폭과 높이를 함께 확인하세요.

동영상도 표시 영역과 원본 비율을 나누어 지정하기

아래 실습은 이 강의를 위해 만든 400×300 무음 영상을 16:9 영역 안에 contain으로 표시합니다. 영상에는 음성·자막 정보가 없고 주황색 원의 이동만 있어, 위아래 또는 양옆 공간과 재생 조작을 확인하는 데 사용합니다. 실습용 WebM 동영상 파일의 주소를 예제에 넣었습니다. 네트워크가 없는 환경에서는 이 파일을 내려받아 HTML과 같은 폴더에 두고 source 주소를 파일 이름으로 바꾸세요.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>video-ratio.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
main { width: min(100%, 34rem); margin-inline: auto; padding: 1rem; }
video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #111; }
</style>
</head>
<body>
<main><h1>동영상의 표시 비율</h1>
<p id="video-description">파란 바탕에서 주황색 원이 움직이는 무음 실습 영상입니다. 재생 버튼으로 시작하고 일시 정지해 비율을 비교하세요.</p>
<video controls preload="metadata" width="400" height="300" aria-describedby="video-description">
  <source src="https://www.codingfactory.net/wp-content/uploads/css-media-ratio-motion-v1.webm" type="video/webm">
  <a href="https://www.codingfactory.net/wp-content/uploads/css-media-ratio-motion-v1.webm">실습 동영상 파일 내려받기</a>
</video></main>
</body>
</html>

controls는 사용자가 재생·정지 등 브라우저 조작을 사용할 수 있게 하고, preload="metadata"는 재생 전에 메타정보를 읽도록 요청하는 힌트입니다. 실제 다운로드 방식은 브라우저가 결정합니다. autoplay를 넣지 않았으므로 재생 버튼을 눌러 확인하세요. object-fit만 cover로 바꾸면 영역은 그대로이고 위아래 내용이 잘리는 차이를 볼 수 있습니다. 확인 후 contain으로 복구합니다.

object-fit은 img·video 같은 대체 요소의 내용을 맞추는 속성입니다. 외부 영상을 넣는 iframe에는 같은 효과가 없으므로 래퍼의 비율을 정하고 iframe이 래퍼를 채우게 만드는 별도 구성이 필요합니다. 음성으로 내용을 전달하는 영상에는 이 무음 예제와 달리 자막 등 필요한 대체 정보를 준비해야 합니다. 적용 범위는 MDN의 object-fit 설명, 재생 속성은 MDN의 video 요소 설명에서 확인할 수 있습니다.