일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- KB국민카드
- 시놀로지
- 보르비스초월
- 스톤에이지
- 워드프레스
- 리눅스
- 윈도우10
- centos
- html/css
- 가상서버호스팅
- 램가스초월
- ConoHa
- 자바스크립트
- KB증권
- Apache
- 티스토리
- 알뜰폰
- 아파치
- jQuery
- 거제도
- Ajax
- 복현오거리
- php
- 알리익스프레스
- iptime
- SKT
- proxmox
- mysql
- 킹북이초월
- 소비전력
- Today
- Total
맛집 여행 캠핑 일상 생활
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>
'jQuery' 카테고리의 다른 글
jQuery image cache load 문제 (0) | 2017.02.10 |
---|---|
XE jquery.min.js 충돌로 에러가 날때 (0) | 2017.01.17 |
jQuery Form 값이 변경되었는지 체크하는 방법 (0) | 2016.08.25 |
jQuery 브라우저 F12 키 막기 (0) | 2016.07.11 |
jQuery 마우스 우측 드래그 선택 막기 (0) | 2016.07.06 |
Trackback : | Comments :