이미지 사이즈 비율 맞추는 3가지 방법

컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있다.

예를들어 이미지를 확대/축소 하거나 특정 비율로 나타나게 하기위해, CSS를 이용하여 img 나 video 요소같은 오브젝트들을 조정해야 되는데 방법이 결코 녹록치 않다.

이번 시간에는 background-img 혹은 img 태그로 이미지를 가져와, 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고 비율을 조정해 꾸밀때, 어떤 css 속성을 사용하여 다루는지 3가지 방법에 대해 한방 정리하는 시간을 가져보자.

 

background 속성을 이용해 조절

 

background-size 속성
먼저 css의 background-img : url() 속성을 통해 이미지를 불러와 사용할때, 사이즈를 조절하는 방법을 알아보자.

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

 

.image { background-image: url("./images/hello.jpg"); background-size: cover; }

이처럼, 직관적이고 간단하지만 배경으로 들어갔을 때만 사용할 수 있기에 html의 이미지 태그에는 사용할 수 없다.

대신 img 태그에는 대신 object-fit 라는 속성이 사용된다. (후술)

즉, background-image로 삽입된 이미지에만 적용할 수 있는 속성이라고 보면 된다.

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

 

 

---

background-position 속성

배경 이미지 위치를 x / y 좌표를 정의하여 요소 상자의 가장자리를 기준으로 항목을 배치한다.

일반적으로 background-image는 좌상단부터 이미지를 출력한다. 이때 background-position 프로퍼티를 사용하면 이미지의 좌표(xpos, ypos)를 지정 할 수 있다.

 

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

 

---

object 속성 이용해 조절

 

object-fit 속성

object-fit 속성은 <img>, <video>, <object>, <svg> 과 같은 요소의 지정된 너비와 높이를 지정하는 css 속성이다.

예를 들어 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다.

 

< TIP >
background-size는 배경이미지의 비율을 조정하는 속성이라고 하면,
object-fit은 img 태그의 이미지의 비율을 조정하는 속성이라고 이해하면 된다.

img { width: 300px; height: 150px; object-fit: cover; }

object-fit 속성	설명
fill	박스 크기에 맞춰 이미지 크기를 조절하며 박스를 가득 채움. (기본값) * 종횡비가 일치하지 않으면 이미지가 늘어나거나 줄어들음
contain	가로세로 비율을 유지한 채로 사이즈가 조절 * 이미지와 컨테이너 간의 비율이 맞지 않는 경우엔 빈공간이 생김
cover	이미지의 종횡비를 유지하면서 박스를 가득 채움. * 종횡비가 일치하지 않으면 컨테이너 박스를 넘어간 이미지 객체는 잘림
none	이미지 크기를 조절하지 않음
scale-down	none과 contain 중 이미지의 크기가 더 작아지는 값에 따름 즉, 컨테이너(영역) 크기보다 이미지 원본 가로/세로 크기가 모두 작으면 확대 없이 1:1 크기로 이미지를 표시("none" 속성), 가로/세로 중 한쪽 방향이라도 영역보다 크면 영역 안에 이미지 전체가 표시되도록 이미지를 축소 표시("contain" 속성) 크기가 다양한 이미지를 목록으로 표시할 때, 아주 작은 이미지들이 늘어나 확대되면 보기 좋지 않아지는 문제를 피할 수 있는 장점이 있다.