[css] object-fit :이미지를 background처럼

이미지를 넣다보면, 화면에 가득차게 하고 싶을 때가 많다.

그럴때는 주로 background를 이용해서 이미지를 넣고, background-size:cover를 적용했다.

 

하지만, 의미있는 이미지의 경우, 접근성을 고려해서 노출하는 게 맞기도 하고,

background 속성으로 지정하는 게 가끔은 귀찮기도 했다.

 

그럴때 사용하면 좋을 css!

 

 

 

왼쪽의 이미지처럼 높이가 큰 이미지를, 왼쪽처럼 정사각형 안에 가득차게 설정했다.

 

 

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

img에 높이, 너비를 설정하고 object-fit:cover 속성을 추가하면 overflow 적용한 듯한 효과를 볼 수 있다.

 

object-fit에는 fill, contain, cover 등의 속성이 있다.

 

각각,

• fill :이미지 사이즈 적용한 것과 동일한 효과
• contain : max-width:100%;max-height:100% 적용한 것과 동일한 효과
• none : 크기 조절 하지 않음.
• scale-down : none과 contain 중 크기가 더 작아지는 값 선택

이러한 속성인데, fill과 contain은 기존의 css 로 대체할 수 있어서, 주로 cover를 사용하게 되지 않을까 한다.

 

ie는 지원하지 않습니다.(edge는 지원)

mdn 바로가기 ⍈