CSS | background-size 속성: contain 및 cover

⭕ CSS | background-size 속성: contain 및 cover

➡️ contain

• 비율을 유지
• 요소의 더 짧은 너비에 맞춤
• 이미지와 요소의 비율이 다를 경우 이미지가 반복될 수 있습니다.

background-size: contain;

 

---

• background-repeat: no-repeat; 옵션
  • 이미지가 반복되지 않고, 대신 요소 주변에 빈 공간이 생깁니다.

background-size: contain;
background-repeat: no-repeat;

 

➡️ cover

• 비율을 유지
• 요소의 더 넓은 너비에 맞춤
• 이미지가 요소의 가로와 세로를 완전히 덮으며, 이미지의 일부가 잘릴 수 있습니다.

background-size: cover;