핵심 코드:
$(function() { $(".dvcontent img").each(function() { var maxwidth = 520; if ($(this).width() > maxwidth) { var oldwidth = $(this).width(); var oldheight = $(this).height(); var newheight = maxwidth/oldwidth*oldheight; $(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); $(this).attr("title","点击查看原图"); $(this).click(function(){window.open($(this).attr("src"))}); } }); });
위 코드를 실행할 수 없는 경우 다음 코드를 사용할 수 있습니다.
$(window).load(function() { $(".dvcontent img").each(function() { var maxwidth = 600; if ($(this).width() > maxwidth) { var oldwidth = $(this).width(); var oldheight = $(this).height(); var newheight = maxwidth/oldwidth*oldheight; $(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); $(this).attr("title","点击查看原图"); $(this).click(function(){window.open($(this).attr("src"))}); } }); });
IE6과 호환되어 이미지가 지정된 너비를 초과하면 자동으로 축소되는 CSS를 통한 방법도 있지만 이 작성 방법은 W3C 표준을 준수하지 않습니다. 코드는 다음과 같습니다.
.cate img{ max-width: 600px; height:auto; width:expression(this.width > 600 ? "600px" : this.width); }
그래서 IE 및 기타 브라우저와 최대한 호환되고 W3C 표준을 준수하기 위해 js를 사용하여 이미지 너비를 제어합니다. 아래에서는 jquery를 사용하여 이미지의 최대 너비를 제어합니다. 주요 코드는 다음과 같습니다.
$(window).load(function() { $(".cate img").each(function() { var maxwidth = 600; if ($(this).width() > maxwidth) { $(this).width(maxwidth); } }); });
코드는 매우 간단합니다. cate 스타일이므로 img의 최대 너비는 600px만 가능합니다. .each(function(){......}), 여기서 각각은 지정된 이미지 컬렉션 객체에 대해 다음 메서드를 하나씩 호출합니다. 이 jquery 메소드는 IE6 이상 브라우저, Chrome 및 Firefox에서 이미지 표시의 최대 너비를 제어할 수 있습니다.