> 웹 프론트엔드 > JS 튜토리얼 > 동일한 비율로 이미지의 너비와 높이를 제어하기 위해 jquery를 사용하는 구체적인 구현

동일한 비율로 이미지의 너비와 높이를 제어하기 위해 jquery를 사용하는 구체적인 구현

WBOY
풀어 주다: 2016-05-16 17:01:46
원래의
1032명이 탐색했습니다.

핵심 코드:

$(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에서 이미지 표시의 최대 너비를 제어할 수 있습니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿