CSS background-size 속성 contain과 cover 차이

css에서 뒷배경을 설정해줄 때는 background-size 로 설정을 해줍니다

이때 배경을 채우는 속성에는 여러가지가 있지만 contain과 cover에 대해 설명하겠습니다

 

 

원본이 아래 사진과 같다면

 

 

# contain

이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정

(이미지가 원본 그대로 살아있으며 따로 설정하지 않으면 이미지가 반복됩니다.)

 

 

# cover

이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정

(이미지를 잘라서 빈 공간이 생기지 않도록 합니다.)

 

 

 

 

 

 

 

 

조금 더 자세히 알고싶다면 링크 참조

https://developer.mozilla.org/ko/docs/Web/CSS/background-size

background-size - CSS: Cascading Style Sheets | MDN