모바일에서 img태그를 이용해 이미지를 넣게 되면 편리하긴 하지만 반응형에서는 이미지가 짤리거나 찌그러져보이는 현상이 나타남. (모바일은 해상도에 따라 이미지를 교체해야 하므로)
값
auto : 배경 이미지의 원본 크기를 유지함
cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정.
이미지의 가로세로비가 요소와 다르면 이미지를 세로, 가로방향으로 잘라서 빈 공간이 생기지 않음
contain: 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
비율이 안맞는 잔여공간이 있을 경우 그 공간은 유지한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#box_wrap{width: 100%; background-color: gold;}
#box_wrap div{background-repeat: no-repeat;}
.box{width: 900px; height: 900px;background-image: url(burger.png);background-color:blue;}
.box02{background-size: contain; width: 1200px;height: 900px;background-color: green; background-image: url(burger.png);}
.box03{background-size: cover; width: 1200px;height: 900px;background-color: orangered; background-image: url(burger.png);}
/* 백그라운드 사이즈 (사용할때: 아이콘제어, 그림을 백그라운드 이미지로 교체해야할때->cover를 많이 사용함 background-size: width heugth;)
contain: 백그라운드 이미지를 w,h 값이 넘지 않는 선에서 확대시켜주는 것 (이미지 비율을 유지한채로 공백이 남는다)
비율 너비 높이가 안맞는 잔여공간이 생기면 그냥 그 공간은 유지함.
cover: 이미지는 꽉 채워줌 but 이미지 비율이 맞지 않게 되면 지정한 w,h 만큼 잘려서 보임
img: 잘라서 보여주는게 아니라 1:1 비율이 맞지 않을 경우 자르는게 아니라 너비나 높이에 따라 반강제로 찌그러뜨려서 보여줌
*/
.box04 {width: 1200px; height: 900px;}
.box04 img{display: block; width: 100%;}
</style>
</head>
<body>
<div id="box_wrap">
<div class="box"></div>
<div class="box02"></div>
<div class="box03"></div>
<div class="box04"><img src="burger.png" alt=""></div>
</div>
</body>
</html>
background-size 자세한 내용(MDN)
https://developer.mozilla.org/ko/docs/Web/CSS/background-size
*개인 공부 및 기록용으로 게시글을 발행하며, 오타나 문제가 있을 경우 댓글을 남겨주세요!
반응형
SMALL
'MarkUp > CSS' 카테고리의 다른 글
| [CSS] article, section? 사용순서는? (0) | 2021.06.24 |
|---|---|
| [CSS]#000은 어디에 사용해야 할까? (0) | 2021.06.24 |
| [CSS] 레이아웃(display, visibility, float, clear, position ) (0) | 2021.01.12 |
| [CSS] 폰트&텍스트 알아보기 (0) | 2021.01.11 |
| [CSS] boxmodel 구성 알아보기 (0) | 2021.01.10 |