. 큰 이미지를 작게해서 반복하기
. 이미지 늘이기
. 작은 이미지를 크게하기
. 특별한 값: "contain"과 "cover"
CSS 이미지 비율유지, 최대크기로 cover
CSS 이미지 비율유지, 최대크기로 crop
/* Keywords syntax */
background-size: cover;
background-size: contain;
/* One-value syntax */
/* the width of the image (height set to 'auto') */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;
/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* Multiple backgrounds values by background-image */
/* Do not confuse this with background-size: auto auto */
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* Global values */
background-size: inherit;
background-size: initial;
background-size: unset;
참고자료
https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images
https://developer.mozilla.org/ko/docs/Web/CSS/background-size
http://zetawiki.com/wiki/CSS_이미지_object-fit_cover
'Web' 카테고리의 다른 글
[웹폰트] 구글 Noto 한국어 글꼴을 웹에서 마음껏 쓰자! (0) | 2017.05.28 |
---|---|
[CSS] 테두리 둥글게 만들기 Rounded Corners (0) | 2017.05.27 |
MARQUEE 태그 (0) | 2017.05.26 |
Tool tip (툴팁) 에관하여 :: TITLE vs ALT (0) | 2017.05.26 |
모바일 웹에서 화면이 세로모드, 가로모드일 때 각각 다른화면 출력 (0) | 2017.05.25 |