본문 바로가기

Web/JQUERY

이미지 리사이즈

반응형
function img_resize() {
    maxsize = 350;   //최대 가로폭
	$("img").each(function() { // 모든 이미지 태그에 적용
        var imgwidth = $(this).width();  // 해당 img의 속성 중 폭(width)의 값
        if (imgwidth > maxsize) {  // 폭이 maxsize 초과할 때에만 줄임
            var imgheight = $(this).height();  // 해당 img의 속성 중 높이(height)의 값
            var ratio = imgwidth/imgheight; // 비율
            var newHeight = Math.round(maxsize/ratio);  // 새 높이는 maxsize으로 원래 비율에 맞춤
            $(this).css({width:maxsize, height:newHeight});  // 폭과 높이를 새로 지정
        }
      });
}
$(window).load(function(){
	img_resize();
});
반응형

'Web > JQUERY' 카테고리의 다른 글

ie7 z-index jquery로 해결  (0) 2017.02.26
Html Img Map 동적으로 적용하기 (Using rwdImageMaps.js in jQuery)  (0) 2017.02.01
slideup 익스플로러 에러 해결방법  (0) 2011.10.07
하단 맞추기  (0) 2011.08.03
JQUERY AJAX  (0) 2011.08.03