웹모아
웹모아[가입] 로그인 / 회원가입   검색     


  
일반팁
 

반응형 웹에서 발생할 수 있는 시각적 요소의 크기 조절 문제
2016-07-12 19:15:33 댓글:(0)   조회:8290
 



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

<!-- 고정된 크기 (픽셀 단위 사용) //-->
<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>

. 


[이전글]  현재페이지 파일명 구하기
[다음글]  php 한글(UTF-8) 자르기


 
댓글쓰기는 회원(로그인 하신분) 이상 가능합니다.


 댓글 (0)

  
일반팁
페이지: 1 / 10   

 php 한글 영어 일어 한자 구분 방법
열람:2113   2021.04.12


 중복 글등록을 방지하는 간단한 팁
열람:14469   2017.05.21


 이전 페이지 돌아가기 예제소스 코드보기
열람:3262   2017.03.14


 현재페이지 파일명 구하기
열람:6136   2016.12.25


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


 php 한글(UTF-8) 자르기
열람:4588   2015.07.09


 php header를 utf-8 로 바꾸기
열람:4298   2015.05.25


 게시판에 파일 첨부 갯수가 20개로 제한되는 경우 - php
열람:4149   2013.10.07


 영문 대소문자 변환
열람:4330   2013.09.17


 mime_type 알기
열람:4334   2010.10.26



[1]  [2]  [3]  [4]  [5]  

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




 
최근 글 [손님]
 
인기 글 [손님]
[홈마스타] [RE] input type=\\
[홈마스타] 실습-테이블구조변경