[css] 이미지 div 크기에 맞게 채우는 방법

이미지를 둘러싸고 있는 div에 꽉차게 하고 싶은 경우 사용할 수 있는 방법이 있다. 

 

아래와 같은 소스 코드가 있다.

<div class="selector">
	<img src="path.extension" alt="alt 텍스트">
</div>

 

img 태그를 div 영역에 꽉차게 하고 싶은 경우 img 태그에 다음 css를 적용하면 된다.

img{
  position: absolute; top:0; left: 0;
  width: 100%;
  height: 100%;
}

이렇게 적용하면 모니터 해상도에 상관없이 해당 div 영역에 꽉 차서 들어간다.