jQuery를 이용해서 게시판에서 이미지 사이즈 조절하기
게시판 작업 중에 컨텐츠 영역에 보여질 이미지의 사이즈를 컨텐츠 영역에 맞게 줄여줘야 할 필요성이 생겨서
이리저리 궁리를 하다보니 jQuery의 each()와 코드를 적절히 사용하면 문제를 해결할 수 있을 것 같아 아래와
같이 코드를 작성하고 테스트해봤는데.. 딱 원하는 기능으로 작동을 하더라는.. ㅎㅎ 한번에 해결하니 좋네. ㅋ
<script type=”text/javascript”>
$(function() {
var content_width = $(‘#view_content’).width();
if($(‘#view_content img’).size() > 0) {
$(‘#view_content img’).each(function() {
var imgObj = new Image();
imgObj.src = $(this).attr(“src”);
if(imgObj.width > content_width) {
$(this).width(content_width);
}
});
}
});
</script>
이렇게 문제를 간단히 해결하니 jQuery를 사용안할 수가 없다. ㅋㅋ
궁금한게 있습니다. ^^.
아래 코드에서 Image 를 새로 만들어서 width 를 구하는 건 왜 그런가요..?
$(this).width() 로 크기를 비교하면 안 되나요..?
var imgObj = new Image();
imgObj.src = $(this).attr(“src”);
if(imgObj.width > content_width) {
$(this).width(content_width);
}
블로그 방문해 주셔서 감사합니다.
말씀하신 내용에 대해서는 전혀 생각지도 못했던 부분이네요.. ^^;
코드를 위처럼 작성한 이유는 달리 없고 자바스크립트에서 이미지사이즈를
구하려면 저렇게 해야한다길래 그렇게 한 것 뿐입니다.
말씀하신 코드로 작동을 한다면 굳이 위의 코드를 쓸 필요는 없을 것 같습니다.
고민하던중이었는데 좋은정보 감사합니다.
덧붙여 이렇게 하니 가로만 줄고 세로는 안줄어드네요…
약간의 아이디어를 덧붙여 비율계산해서 세로도 줄여봤습니다.
개념은 이미지가 1,2 두개 있을때 가로1:세로1=가로2:세로2 <--어렸을때배웠죠? 이것을 바꾸면 세로1*가로2=가로1*세로2 님 코드 바꾸면 if 안에서 var tempSize1=imgObj.height*$('#view_content').width()/imgObj.width; $(this).width(content_width); $(this).height(tempSize1); 이렇게 하니 ie9에서 세로가 비율대로 줄여졌습니다.
블로그 방문해 주셔서 감사합니다.
이미지에 height 속성 값이 모두 있다면 말씀하신 것처럼 해야합니다.