반응형 웹에서 발생할 수 있는 시각적 요소의 크기 조절 문제 < 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 >
|