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' 카테고리의 다른 글

user-select  (0) 2017.12.04
말줄임 처리  (0) 2017.11.16
inline-block 으로 했을때 요소간 여백 없애기  (0) 2017.03.27
IE에서 Input 태그 우측 delete('X") 버튼 없애기  (0) 2016.12.16
Img(인라인) 수직정렬  (0) 2016.12.07
<