해상도에 따라서 이미지 동영상의 사이즈를 자동적으로 조절하는 방법 / 반응형 웹 기술
페이지 정보
작성자 JMStudy 작성일15-07-16 17:10 조회2,540회 댓글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>
<!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>
댓글목록
등록된 댓글이 없습니다.