해상도에 따라서 이미지 동영상의 사이즈를 자동적으로 조절 > 기술자료

• 목록

[ 방법 1. CSS 활용 ]
해상도에 따라서 이미지의 크기가 자동으로 변하면서도, 이미지 본래의 크기보다 해상도가 커지는 경우에는 이미지 크기가 고정
최대 크기(max-width)를 100%로 지정하여, 자동으로 크기가 조정되고 중요한 점은 둘러싼 div 인경우 마찬가지로 % 형태로 되어 있어야 합니다.

<style type="text/css">
#resizable_content {width:100%}
</style>

<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<script>
  $(function() {
      $("#resizable_content img").attr({"width":"", "height":""}).css({"max-width": "100%"});
  });
</script>
 
<div id="resizable_content">
    <img src="111.png">
</div>


[ 방법 2. CSS 활용 ]
<style>
.visual { width:100%; margin:0 auto; text-align:center; }
.visual img { max-width:100%; }
</style>

<div class="visual">
    <img src="111.png">
</div>


[ 방법 3. jQuery 활용 ]
해상도에 따라서 이미지의 크기가 자동으로 변하면서도, 이미지 본래의 크기보다 해상도가 커지는 경우에는 이미지 크기를 고정하는 방법

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script>
$(function() {
    $("#img_resizable img, .resizablebox").each(function() {
        var oImgWidth = $(this).width();
        var oImgHeight = $(this).height();
        $(this).css({
            'max-width':oImgWidth+'px',
            'max-height':oImgHeight+'px',
            'width':'100%',
            'height':'100%'
        });
    });
});
</script>

<div id="img_resizable">
    <img src="img/happyjung_com1.png"><br>
    <img src="img/happyjung_com2.png">
</div>


참고자료
http://adminplay.com/webhosting07/169935
http://www.erzsamatory.net/86
http://tobyyun.tumblr.com/post/55770417057/rwd-1-prologue
http://www.dweb.co.kr/m/bbs/board.php?bo_table=webstandard&wr_id=20
http://www.erzsamatory.net/86