CSS에서 이미지를 자르는(crop) 방법은 여러 가지가 있지만, 그중에서도 가장 간단하고 효과적인 세 가지 방법을 소개합니다.
1. object-fit 활용하기
object-fit: cover를 사용하면 이미지의 원본 비율(aspect ratio)을 유지하면서도 손쉽게 이미지를 잘라낼 수 있습니다.
object-fit과 object-position을 함께 조합하는 방법도 있습니다. 이미지에 object-fit을 none으로 설정한 뒤 object-position: 50% 50%을 지정해 보세요. 그러면 이미지가 컨테이너의 정중앙에 배치됩니다. 첫 번째 값은 왼쪽에서 얼마나 떨어진 위치에 이미지를 놓을지, 두 번째 값은 위쪽에서 얼마나 떨어진 위치에 놓을지를 결정합니다.
2. background-image 활용하기
이미지를 넣고 싶은 <div> 요소에 background-image: url(<이미지 URL>) 속성을 지정하고, background-size를 cover로 설정하면 비율이 유지된 상태로 이미지가 잘려서 표시됩니다. background-position의 기본값은 top left(왼쪽 상단)입니다.
다만 이 방식에는 접근성(accessibility) 관련 단점이 있습니다. 배경 이미지는 스크린 리더가 반드시 읽어 주지 않기 때문에, 해당 이미지가 사이트의 핵심 목적과 직결된다면 페이지 본문에 이미지 내용을 설명해 주거나 다른 방식을 선택하는 것이 좋습니다.
3. width·height, margin, overflow 활용하기
<img> 태그를 감싸고 있는 컨테이너(대개 <div> 요소)에 position: relative와 overflow: hidden을 설정합니다. relative 포지셔닝은 이미지 주위에 일종의 '울타리'를 만들어 명확한 경계를 정해 주고, overflow 속성은 그 경계를 벗어나는 부분을 숨겨 줍니다.
아래 코드 편집기 예제에서는 위에서 설명한 다양한 이미지 자르기 방법을 실습해 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
h3 {
text-align: center;
margin: 20px;
padding: 20px;
border-top: 1px solid black;
}
div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
div > div {
max-width: 500px;
width: 100%;
align-self: center;
position: relative;
overflow: hidden;
}
img {
width: 100%;
}
div.crop-top img {
margin: -20% auto 0;
}
div.crop-bottom img {
margin: 0 auto -20%;
}
div.crop-vertically img {
margin: -20% auto -20%;
}
div.crop-right img {
width: 120%;
margin: 0 -20% 0 0;
}
div.crop-left img {
width: 120%;
margin: 0 0 0 -20%;
}
div.crop-horizontally img {
width: 180%;
margin: 0 -20% 0;
height: 500px;
}
div.crop-square img {
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<h3>Normal</h3>
<div>
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Top Cropped</h3>
<div class="crop-top">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Bottom Cropped</h3>
<div class="crop-bottom">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Bottom and Top Cropped</h3>
<div class="crop-vertically">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Right Cropped</h3>
<div class="crop-right">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Left Cropped</h3>
<div class="crop-left">
<img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Left and Right Cropped</h3>
<div class="crop-horizontally">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<h3>Square Crop</h3>
<div class="crop-square">
<img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
</div>
</body>
</html>
예제의 HTML에서 클래스 이름 속성을 확인한 뒤, 이에 대응하는 CSS를 함께 살펴보세요. 마진(margin) 값이 어떻게 설정되어 화면에 보여질 이미지 영역을 조절하는지 그 원리를 파악할 수 있을 것입니다.
마무리
상황에 따라 최적의 방법이 달라집니다. <img> 태그를 유지해야 하는 경우에는 object-fit이나 margin·overflow 조합이 적합하고, 장식용 이미지라면 background-image 방식도 좋은 선택입니다. 특히 콘텐츠의 의미를 담고 있는 중요한 이미지라면 접근성까지 고려해 방법을 선택하는 것이 바람직합니다.
참여자의 81%가 코딩 부트캠프 수료 후 기술 직군 취업 전망에 대해 더 큰 확신을 느꼈다고 답했습니다. 지금 바로 자신에게 맞는 부트캠프 매칭을 받아보세요.
또한 부트캠프 수료생은 평균적으로 부트캠프 시작부터 첫 직장 취득까지 6개월 이내에 커리어 전환을 완료한 것으로 나타났습니다.