[CSS] 이미지를 div 크기에 맞게 확장하여 채우는 방법

이미지를 둘러싸고 있는 div에 맞게 확장시켜 div에 꽉 차게 하고 싶은 경우가 있을 수 있습니다. 이런 경우 몇 가지 방법을 사용할 수 있습니다.

<div class="selector">
<img src="path.extension" alt="alt 텍스트">
<!-- 컨텐츠 -->
</div>

HTML이 위와 같은 경우 다음과 같은 CSS 코드를 사용하면 이미지가 비율에 관계없어 늘어나서 div를 채우게 됩니다.

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

jQuery를 사용할 수도 있습니다.

$('.selector img').each(function(){
$(this).css({
"left": "50%",
"margin-left": "-"+( $(this).width()/2 )+"px",
"top": "50%",
"margin-top": "-"+( $(this).height()/2 )+"px"
});
});

이외에도 다음 글에 여러 가지 방법이 제시되어 있으니 참고하시기 바랍니다.

 

Leave a Comment

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드