본문 바로가기
프론트엔드/HTML & CSS & Javascript

CSS | background-size 속성: contain 및 cover

by YUNI Heo 2024. 5. 14.
반응형

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

➡️ contain

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

 


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

 

➡️ cover

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

 

 

반응형