웹모아 
웹모아  로그인  회원가입   
웹모아
 
일반팁
 


반응형 웹에서 발생할 수 있는 시각적 요소의 크기 조절 문제
  등록: 2016-07-12 19:15:33 조회:3931
http://web.landmoa.net/?acmode=b_s&curjong=web003004&no=31233



반응형 웹에서 발생할 수 있는 시각적 요소의 크기 조절 문제


<!-- 고정된 크기 (픽셀 단위 사용) //-->
<img src="..." width="500" height="500" />
<div style="width:500px; height:500px;"></div>
<iframe src="..." width="500" height="500"></iframe>
  
<!-- 상대적인 크기 (백분율 단위 사용) //-->
<img src="..." width="100%" />
<div style="width:50%;"></div



완벽한 반응형 웹을 위한 시각적 요소의 크기 자동 조절 방법

<img src="..." style="max-width:1024px; max-height:800px; width:100%; height:100%;" />



자바스크립트를 이용한 시각적 요소의 크기 자동 조절 방법

$(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%'
        });
    });
});



적용한 실제 HTML 소스코드

<!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>







 

 





일반팁
페이지: 1 / 4   

   중복 글등록을 방지하는 간단한 팁2775
   이전 페이지 돌아가기 예제소스 코드보기825
   현재페이지 파일명 구하기3690
반응형 웹에서 발생할 수 있는 시각적 요소의 크기 3932
   php 한글(UTF-8) 자르기2250
   php header를 utf-8 로 바꾸기2081
   게시판에 파일 첨부 갯수가 20개로 제한되는 경우 2526
   영문 대소문자 변환2643
   mime_type 알기2576
   MIME Type이란20038
     Microsoft 제품군 관련 MIME Type 목2562
   헤더(header) 정리3869
   이미지 태그에서 주소를 php 문으로 나타내기2504
   php mysql 연동 날짜 계산 mktime da3569
   PHP로 소켓 서버 작성하기4064
   fsockopen을 이용한 서버 동작 체크2933
   fsockopen을 이용한 웹 접속 [1]3005
   단어링크2616
   php, 전체경로 include2813
   urlencode 와 rawurlencode 의3320
   배열로 넘어온 변수를 for문으로 배열에 넣기3304
   class 사용법 질문입니다...2576
   중복 배열의 값과 중복회수 체크3077
   한글 유니코드 표(홈마스타)3170
   사용된 모든 변수 내역 확인(홈마스타)2953
   include & include_once & req(홈마스타)2814
   절대경로와 상대경로를 아는 방법(홈마스타)3145
   현재 파일이 실행되고 있는 최종 디렉토리 구하기(홈마스타)3021
   2차원 배열 - 출력하기(홈마스타)(1) 2968
     [RE] 쿼리결과 2차원 배열로 저장하기(홈마스타)3881
≪ [1]  [2]  [3]  [4]   ≫

복수단어 검색은 공백(space)로 구분해 주세요.



 
최근 글 자료
40
40
57
35
26
34
2775
667
652
825
741
3837
3274
3333
3690
 
인기글 자료
3898
3995
4841
4064
3690
3948
4388
4851
9834
4245
4218
7021
[홈마스타] [RE] input type=\\
6518
3776
5056