css로 이미지 비율 설정하기

웹사이트를 만들다보면 레이아웃 측면에서 이미지의 비율을 조정해야할 때가 많습니다.
그러나 그냥 img태그로 이미지를 삽입하면 원래 이미지의 비율대로 출력되기 때문에
내가 원하는 레이아웃의 웹사이트를 만들 수 없습니다.

그렇기 때문에 css로 이미지 비율을 설정하는 방법에 대해 알아봅시다 !

<div class="image-wrapper">
 <img class="image" />
</div>

.image-wrapper {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.26%;
   overflow: hidden;
}

.image-wrapper .image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

위와 같은 코드를 작성하면 이미지의 가로 세로 비율을 16:9로 맞출 수 있습니다.

• 2:1 ➡️ padding-top: 50%

• 1:2 ➡️ padding-top: 200%

• 4:3 ➡️ padding-top: 75%

• 16:9 ➡️ padding-top: 56.25%

  ---

추가로 이미지와 관련된 css속성인 object-fit에 대해 알아봅시다.

object-fit: fill

• 기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다.

object-fit: contain

• 요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다.
  딱 맞추기 때문에 남는 공간이 발생할 수 있습니다.

object-fit: cover

• 요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다.
  개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다.

object-fit: none

• 크기가 조정되지 않고 원본사이즈로 처리됩니다. 크면 잘리고, 작으면 남습니다.

object-fit: scale-down

• 크기를 아무것도 지정되지 않거나 혹은 contain이 지정되어 있는 것처럼 변경됩니다.
  이는 원본 크기보다 작아지는 결과를 보여줍니다.