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