HTML & CSS - [CSS] img 요소 다루기 1 ( 사이즈 조정 )

서론

웹 페이지를 만드는 과정에서 배경, 사진, 아이콘 등 다양한 이미지를 사용하게 됩니다.

불러오는 이미지 원본에 크기에 따라 생각처럼 배치하기 쉽지 않은 경우가 많습니다. 

본문에서는 이미지를 원하는 크기와 방식으로 손쉽게 배치하는 몇 가지  방법에 대해서 알아보도록 하겠습니다.

 

1. Width & Height 속성 이용하기 1

가장 손쉽게 이미지를 조정하는 방법입니다.

가로, 세로의 크기를 정의하는 것으로 이미지 크기를 조정할 수 있습니다.

 

See the Pen Img(width &height) by Gon (@gon-91) on CodePen.

다만, 사진의 비율에 문제가 생길 수 있습니다.

 

2. Width & Height 속성 이용하기 2 (상위 요소에 채우는 방법)

이미지를 어딘가  배치할 때 특정 공간에 딱 맞게 배치하고 싶은 경우가 있습니다.

이 또한 width와 height속성을 이용해서 배치할 수 있습니다.

 

See the Pen img(100%) by Gon (@gon-91) on CodePen.

예제처럼 상위 요소의 크기를 지정하고, img속성의 width, height를 100%로 적용하면 됩니다.

 

3. Object-fit 속성 이용하기

img태그에는 objext-fit속성을 사용하여 이미지를 제어할 수 있습니다. 

이미지의 비율을 유지하고 손쉽게 이미지 크기를 제어하는데 효율적입니다.

object-fit 속성은 여러 종류의 값이 있습니다.

값	특징
fill	주어진 가로 세로에 이미지를 채웁니다. 비율이 유지되지 않습니다.
contain	가로 세로 비율을 유지합니다. 단, 주어진 공간에서 비율을 유지할수 없다면, 공간을 남기게 됩니다.
cover	가로 세로 비율을 유지합니다.  단, 주어진 공간에서 비율을 유지할수 없다면, 이미지를 확대하여 채웁니다.
none	본래의 크기를 유지합니다. 단, 주어진 공간이 작다면 이미지의 가운데 부분부터 보여집니다.
scale-down	none과 contain중 적절한 방식을 알아서 선택합니다.

 

See the Pen img(object-fit) by Gon (@gon-91) on CodePen.

 

img속성의 크기를 조절하는 방법은 위의 방법들 외에도 다양한 방법이 있습니다. 

어떤 것을 사용하는 것이 정답이라고 할 수는 없습니다.

여러분들에게 손쉬운 사용방법을 찾아보세요.