반응형
⭕ CSS | background-size 속성: contain 및 cover
➡️ contain
- 비율을 유지
- 요소의 더 짧은 너비에 맞춤
- 이미지와 요소의 비율이 다를 경우 이미지가 반복될 수 있습니다.
background-size: contain;
- background-repeat: no-repeat; 옵션
- 이미지가 반복되지 않고, 대신 요소 주변에 빈 공간이 생깁니다.
background-size: contain;
background-repeat: no-repeat;
➡️ cover
- 비율을 유지
- 요소의 더 넓은 너비에 맞춤
- 이미지가 요소의 가로와 세로를 완전히 덮으며, 이미지의 일부가 잘릴 수 있습니다.
background-size: cover;
반응형
'프론트엔드 > CSS' 카테고리의 다른 글
CSS | 중앙 정렬 : 수평 중앙 정렬, 수직 중앙 정렬 (80) | 2024.05.16 |
---|---|
CSS | CSS 초기화 (reset.css) (80) | 2024.05.16 |
CSS | CSS 선택자 : 기본 선택자, 복합 선택자, 동작 기반 가상 클래스 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자 (80) | 2024.05.16 |
CSS | 요소(Element)와 클래스(Class)의 차이 (79) | 2024.05.16 |
CSS | 플렉스(Flex, Flexbox, Flexible Box Layout) 레이아웃 배치 (73) | 2024.05.14 |
CSS | position 위치 속성: Static, Relative, Absolute, Fixed, Sticky (74) | 2024.05.14 |
CSS | 여백 속성: Margin 및 Padding (74) | 2024.05.14 |
웹 구조 WEB | 스타일 시트 CSS, Cascading Style Sheets (0) | 2023.02.09 |