WEB_TECH/CSS2
브라우저 사이즈만큼 이미지 늘어나게 만들기
지식사랑
2013. 4. 25. 11:41
브라우저의 다큐먼트 사이즈만큼 이미지를 늘어나게 만들 수 있습니다.
어떠한 해상도에도 대응이 되니까
은은하게 배경으로 깔아주면 효과가 아주 좋겠죠.
다음 코드를 실행시켜 봅시다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>이미지화면크기로 늘어남</title>
<style type="text/css">
body{margin:0px;}
/* 배경 스타일 */
#bg{position:absolute; top:0px; width:100%; height:100%; background-size:100%; z-index:-1;}
</style>
</head>
<body>
<img id="bg" src="http://placehold.it/200x200" />
</body>
</html>
200X200사이즈의 이미지를 불러왔는데 브라우저를 잡아당기면 아래 그림처럼 비율에 상관없이 화면에 꽉차는 것을 볼 수 있습니다.
