맛집 여행 캠핑 일상 생활

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

jQuery

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

영은파더♥ 2016. 11. 16. 11:42

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>


Trackback : | Comments :