jQuery 브라우저 크기에 맞게 이미지 크기 조절

jQuery 브라우저 크기에 맞게 이미지 크기 조절

브라우저가 리사이징 되더라도 이미지가 화면비율에 맞게 꽉 차도록 하는 소스코드입니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#bannerImg").width($(window).width());

$(".main_banner").width($("#bannerImg").width());

$(".main_banner").height($("#bannerImg").height());

});

$(window).resize(function(){

$("#bannerImg").width($(window).width());

$(".main_banner").width($("#bannerImg").width());

$(".main_banner").height($("#bannerImg").height());

});

</script>

<style type="text/css">

body { margin:0; padding:0; }

div.main_banner { width:100%;height:auto; }

</style>

<div class="main_banner">

<img id="bannerImg" src="example.png" />

</div>