해상도에 따라서 이미지 동영상의 사이즈를 자동적으로 조절하는 방법 / 반응형 웹 기술 > JQuery & JavaScript

STUDY ROOM

JQuery & JavaScript

해상도에 따라서 이미지 동영상의 사이즈를 자동적으로 조절하는 방법 / 반응형 웹 기술

페이지 정보

작성자 JMStudy 작성일15-07-16 17:10 조회3,000회 댓글0건

본문

#post_content 내의 모든 이미지 그리고 resizable 클래스가 적용된 모든 객체에 대해서 최대 해상도를 지정하고 기본 해상도를 100% x 100%로 맞추는 역할을 합니다. 자바스크립트의 작동 순서를 보자면, 이미지에 이미 정해져 있던 또는 이미지의 본래 크기를 구한 후 이것을 최대로 확대 가능한 해상도로 정의하고, 반응형 웹에서는 해상도에 따라 크기가 변동되어야 하므로 기본 해상도를 100% x 100% 로 정의하는 순서로 작동합니다. 이렇게 하면 웹페이지에 삽입되어 있는 모든 이미지와 시각적 요소에 대해서 그 크기를 반응형으로 만들 수 있습니다. 

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="utf-8"/> 
    <title>Responsive Web</title> 
    <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
    <style> 
        body { 
            padding:0px; 
            margin:0px; 
        } 
    </style> 
    <script> 
        $(function() { 
            $("#post_content 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> 
</head> 
<body> 
    <div id="post_content"> 
        <img src="http://www.erzsamatory.net/attach/1/3349047834.jpg" /> 
        <br /><br /> 
        <img src="http://www.erzsamatory.net/attach/1/2751001801.jpg" /> 
    </div> 
</body> 
</html>
댓글목록

등록된 댓글이 없습니다.