[CSS] 이미지 사이즈 비율 맞추기 - object-fit / background-size / position

zzzdawn45·2025년 8월 4일
CSS

CSS

목록 보기
8/8
post-thumbnail

프론트 작업을 할때, 컨테이너(박스)의 크기는 고정되어 있지만 이미지의 크기는 다양한 경우가 많다. 이미지를 확대/축소하거나 종횡비를 유지하면서 특정 크기에 맞추려년 CSS 속성을 적절히 활용해야 한다

01 background 속성을 이용해 조절

background-size 속성

배경이미지로 불러와 이미지 사이즈와 비율을 조절하고 싶으면, 간단하게 background-size 속성을 통해 조정이 가능하다

.image {
	background-image: url("./images/hello.jpg");
	background-size: cover;
}
background-size 속성설명
contain이미지 가로/세로 비율을 유지하면서, 이미지가 잘리지 않을 때까지만 채운다
cover이미지의 가로/세로 비율을 유지하면서, 이미지가 잘리더라도 주어진 크기를 꽉 채운다
사이즈 직접 입력비율에 무관하게 입력한 값에 맞춰 사이즈를 조절

직관적이고 간단하지만 배경으로 들어갔을때만 사용할 수 있기에 HTML 이미지 태그에는 사용할 수 없다. 즉, background-image로 삽입된 이미지에만 적용할수 있는 속성이라 보면 된다

그래서 만일 서버에서 동적으로 이미지 주소를 전달하는 경우, 아래처럼 인라인 스타일로 background-image를 넣어줘야 한다

<div style="background-image: url('./images/hello.gif')"></div>

이렇게 되면 이미지 태그를 쓸 수 없으니 SEO나 사용자 경험 측면에서 손해 볼수도 있긴하다

background-position 속성

배경 이미지 위치를 x y 좌표를 정의하여 요소 상자의 가장자리를 기준으로 항목을 배치한다. 일반적으로 좌상단부터 이미지를 출력한다

background-position: top;
background-position: bottom;
background-position: center;
background-position: left;
background-position: right;

/* width height 위치가 값에 따라 이동되서 나타나게 된다 */
background-position: 25% 75%; 
background-position: 10px 20px;


02 object 속성을 이용해 조절

object-fit 속성

<img> <video> <object> <svg> 과 같은 미디어 요소의 지정된 너비와 높이를 지정하는 CSS 속성이다. 썸네일 목록에서 작은 이미지가 늘어나 흐려지는 걸 방지하기 좋다

img {
	width: 300px;
	height: 150px;
	object-fit: cover;
}
object-fit 속성설명
fill박스 크기에 맞춰 이미지 크기를 조절하며 박스를 가득 채움(기본값) → 종횡비가 일치하지 않으면 이미지가 늘어나거나 줄어들음
contain가로/세로 비율을 유지한 채로 사이즈가 조절→ 이미지와 컨테이너 간의 비율이 맞지 않은 경우엔 빈공간이 생김
cover이미지의 종횡비를 유지하면서 박스를 가득 채움→ 종횡비가 일치하지 않으면 컨테이너 박스를 넘어간 이미지 객체는 잘림
none이미지 크기를 조절하지 않음
scale-downnone과 contain 중 이미지의 크기가 더 작아지는 값에 따름



object-position 속성

object-fit 속성은 기본적으로 요소의 가운데로 이미지를 이동시킨다. 이 위치를 원하는 값으로 변경하는 것이 object-position 속성이다

숫자형 px, em, % 등이 사용되며, 키워드 top, left, right, bottom이 사용될 수 있다

img.one{
	object-position: center center;
}
img.two{
	object-position: right bottom;
}
img.three{
	object-position: 50% 50%;
}
img.four{
	object-position: 100px 50px;
}

03 position: absolute를 이용해 조절

<img>를 컨테이너 안에서 절대 위치로 띄우고, 컨테이너에는 overflow: hidden을 줘서 잘리는 부분을 숨기는 방법이다

이미지를 가운데 정렬하기 위해 top, left, transform 속성이 추가로 필요하다

.container{
	width: 200px;
	height: 150px;
	overflow: hidden;   /*넘치는 이미지를 가린다*/
}

.container > img {
	position: absolute;
	width: 100%;
	
	/*이미지 위치*/
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
  • 모든 브라우저에 동작
  • 미세한 위치 조정이 자유롭지만, object-fit에 비해 코드가 길고 유지보수가 어려움

04 선택 가이드

  1. 단순 배경 장식 → background-size + position
  2. SEO/접근성 필요 → <img> + object-fit
  3. 고급 커스텀 위치 조정 필요 → position: absolute + overflow: hidden

추가 팁

  • object-fit은 IE에서 지원하지 않으므로 레거시 대응 시 3번 방식 사용
  • 반응형 이미지를 위해 width: 100% height: auto 조합과 함께 사용 가능
  • aspect-ratio 속성을 활용하면 최신 브라우저에서 비율 유지가 더 간단해짐

05 aspect-ratio

  • aspect-ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 한다
  • 만약 요소의 너비를 100px로 지정하고, aspect-ratio: 3/1을 하면 높이는 33.333px가 된다
aspect-ratio: 3/1;
aspect-ratio: 4;
aspect-ratio: auto;
aspect-ratio: auto 1/1;

인터넷 익스플로러를 제외한 브라우저에서 지원하는 속성이다

width / height 지정

  • / 를 이용하여 width / height 비율을 지정할 수 있다
  • 3/1이라고 지정하면 너비는 3, 높이는 1의 비율을 가지게 된다
aspect-ratio: 3/1;
<h1>종횡비: 3/1</h1>
<div class="box"></div>

<style>
  .box {
    width: 100px;
    aspect-ratio: 3/1;  /* 100, 33.333 */
    background: red;
  }
</style>

  • 만약에 하나의 값만 지정할 경우, 높이를 1로 간주한다
aspect-ratio: 5;

위 코드는 너비는 5, 높이는 1의 비율을 가진다는 뜻이 된다

<h1>종횡비: 5/1</h1>
<div class="box"></div>

<style>
  .box {
    width: 100px;
    aspect-ratio: 5;  /* 100, 20 */
    background: red;
  }
</style>

두개의 값 지정

auto와 /를 동시에 사용할 수 있다

aspect-ratio: auto 1/1;

이 경우에는 요소가 고유한 종횡비를 가지는 경우 해당 종횡비를 따르지만, 만약 그렇지 않은 경우 지정한 비율을 따른다

<div>
  <h1>(A) 종횡비 1/1 적용</h1>
  <div class="box-1"></div>
</div>
<div>
  <h1>(B) 이미지, 종횡비 auto 적용</h1>
  <img class="box-2" src="https://w.namu.la/s/09b11b4ec0c0043aeec719b6bb19377412b278aec57ca31771db76e2e413af50d00b3d57c0494fb7fe7a7cde8efdbed322dc1610e0a601c65f2b34114e61d644e0e300767efc5e34a9cb4091aa110a37d941b921f9ed65c88314def82545208d"/>
</div>
<div>
  <h1>(C)이미지, 종횡비 1/1 적용</h1>
  <img class="box-3" src="https://w.namu.la/s/09b11b4ec0c0043aeec719b6bb19377412b278aec57ca31771db76e2e413af50d00b3d57c0494fb7fe7a7cde8efdbed322dc1610e0a601c65f2b34114e61d644e0e300767efc5e34a9cb4091aa110a37d941b921f9ed65c88314def82545208d"/>
</div>

<style>
  body {
    display: flex;
    gap: 20px;
  }
  .box-1 {
    width: 100px;
    aspect-ratio: auto 1/1;
    background: orange;
  }
  .box-2{
    width: 100px;
    aspect-ratio: auto 1/1;
  }
  .box-3{
    width: 100px;
    aspect-ratio: 1/1;
  }
</style>

  • (A) div 요소의 경우, 고유한 종횡비가 없어 1/1 종횡비를 따른다
  • (B) 하지만 img 요소의 경우, 이미지 자체가 고유한 종횡비가 있기에 auto가 적용된다
  • (C) 단, img 요소에서 auto를 제거하게 되면 1/1 종횡비를 따르게 된다

img 비율 지키면서 쓰는 법

이미지에 aspect-ratio를 지정하면 이미지가 깨지던데 이 경우에는 어떻게 할까?

  • 이미지 깨짐을 방지하면서 종횡비를 지정하고 싶다면, object-fit 속성을 같이 쓰자
  • img의 부모에 aspect-ratio를 지정하고 img에 object-fit: cover를 하면 이미지가 깨지지 않으면서 원하는 종횡비로 지정할 수 있다
<div class="parent">
  <img class="img" src="https://w.namu.la/s/09b11b4ec0c0043aeec719b6bb19377412b278aec57ca31771db76e2e413af50d00b3d57c0494fb7fe7a7cde8efdbed322dc1610e0a601c65f2b34114e61d644e0e300767efc5e34a9cb4091aa110a37d941b921f9ed65c88314def82545208d"/>
</div>

<style>
  .parent{
    width: 300px;
    aspect-ratio: 3/1;
    border: 4px solid red;
  }
  .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

aspect-ratio 예외 상황

aspect-ratio를 사용하다보면, 해당 속성이 적용되지 않은 순간이 있을 것이다. 어떤 경우에 예외 상황이 발생하는지 알아보자

  1. 너비, 높이가 지정된 경우

요소의 너비와 높이가 지정된 경우, aspect-ratio는 반영되지 않는다

<h4>종횡비: 5/1</h4>
<div class="box"></div>

<style>
  .box{
    width: 150px;
    height: 100px;
    aspect-ratio: 5;
    background: red;
  }
</style>

  1. min-XXX가 지정된 경우
  • min-width는 요소의 너비가 특정 값 이하로 작아지는 것을 방지한다
  • 그렇기 때문에 종횡비와 min-XXX 혹은max-XXX 지정을 같이 하면 예상치 못한 결과가 나올 수 있다
<h4>종횡비: 3/1</h4>
<div class="box"></div>

<style>
  .box{
    width: 100px;
    min-height: 50px;
    aspect-ratio: 3/1;
    background: red;
  }
</style>

아래 예시는 종횡비 3/1, 너비는 100px로 지정하여 너비 100px, 높이 33.33px이 되는 게 목적이었다. 하지만 높이에 대해 min-height를 지정했기 때문에, min-height 기준으로 계산되어 너비 150px, 높이 50px이 된다

  1. 내용이 요소를 넘기는 경우
  • 요소의 내용이 너무 길먄, 요소는 확장되는데 이 경우에는 종횡비가 적용되지 않는다
  • 만약 요소의 길이와 상관없이 종횡비를 적용하고 싶다면, 요소에 min-height: 0 을 지정해야 한다
<div class="box-1">
  <h4>수정 전</h4>
  <p>ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</p>
</div>

<div class="box-2">
  <h4>수정 후</h4>
  <p>ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</p>
</div>

<style>
  .box-1{
    width: 200px;
    aspect-ratio: 3/1;
    background: red;
    margin-bottom: 40px;
  }

  .box-2{
    width: 200px;
    min-height: 0;
    aspect-ratio: 3/1;
    background: red;
  }
</style>

출처 : https://mong-blog.tistory.com/entry/css-Aspect-Ratio-요소를-비율대로-조정하기

출처 : https://inpa.tistory.com/entry/CSS-📚-이미지-사이즈-비율-맞추는-3가지-방법-object-fit-background-size-position

profile
zzzdawn45
이전 포스트

[CSS] 3D 캐러셀 슬라이드(3D Carousel Slide)

0개의 댓글