[CSS] object-fit 속성으로 오브젝트 채우기

CSS를 이용하여 비율에 맞게 이미지를 조정해 본 적이 있을 것이다.
보통 background-image로 받아서 size를 조정하거나 자체 이미지를 수정했었던 기억이 있는데
CSS3 object-fit 속성을 이용하여 좀 더 편하게 수정을 할 수 있다는 것을 알게되었다.

이미지 뿐만 아니라 각각의 다양한 크기를 가진 object들(<img>, <video>, <object>, <svg> 등)을 비율에 맞게
재 설정하는데에 유용하다.

 

*IE에서는 지원이 되지 않음

 

object-fit의 사용

img{
    width: 200px;
    height: 200px;
    object-fit: fill;
}

 

object-fit: none;

object의 원본사이즈로 가운데 정렬을 해준다.

 

object-fit: fill;

지정된 너비와 높이에 따라 이미지가 확대,축소 되어 채워진다.

object-fit: contain ;

종횡비는 유지되지만 정의된 너비와 높이안에서만 적용되어 빈 공간이 생길 수있다.

object-fit: cover;

objcet가 종횡비를 유지하면서 빈공간이 없도록 확대된다.

 

 

object-position

기본 속성은 center로 맞추어져 있지만 이미지의 position을 변경할 수 있다.

 

object-fit: cover와 border-radius

img{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 100px;
  }

 

 

+ background 속성을 이용해서 위와 같은 결과를 출력 할 수도 있다.

#background {
    width: 200px;
    height: 200px;
    background-image: url('./img/poo1.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 100px;
}