background-size : cover / contain

2017. 8. 8. 21:29[개발] 지식/CSS

background-size : cover

비율은 유지한 채, 최대한 부모 엘리먼트에 꽉 채운다.
예를들어 가로 세로가 200px 300px 인 이미지가 가로 세로 300px의 엘리먼트 안에 있을 때,
'cover' 는 가로를 300px까지 늘리고 세로의 일부를 자른다.

background-size : contian

비율은 유지한 채, 부모 엘리먼트 안에서 가능한 모든 것을 보여준다.
가로 세로가 200px 300px인 이미지가 가로 세로 300px 엘리먼트 안에 있을 때
더 긴 세로 300px 기준으로 이미지를 맞추고 가로는 동일 비율로 200px을 유지한다. 

'[개발] 지식 > CSS' 카테고리의 다른 글

<