i,Firefox 를 호 환 하 는 그림 자동 크기 조정 css 와 js 코드 공유

이 기능 은 주로 콘 텐 츠 페이지 의 그림 이 너무 커서 페이지 가 보기 싫 은 것 을 해결 하 는 것 입 니 다.이런 코드 가 필요 합 니 다.필요 한 친 구 는 그림 width<=600 px,height<=800 을 참고 할 수 있 습 니 다.1.max-width,max-height 를 이용 하여 그림 등 비례 자동 크기 조정 코드:

 
img{max-width: 600px;max-height: 800px;} 

ie6 는 css max-width,max-height 를 지원 하지 않 기 때문에 ie6 에서 javascript 스 크 립 트 를 이용 하여 크기 를 조절 해 야 합 니 다.2.javascript 스 크 립 트 로 ie6 를 호 환 합 니 다.코드 는 다음 과 같 습 니 다.

 
var img_width = img.OffsetWidth;<BR>var img_height = OffsetHeight; 
var current_w = (150*img_width)/img_height; 
var current_h = (330*img_height)/img_width; 
if(img_height>150){ 
if(img_width>330){ 
D.css(img,{ 
width:330 + "px", 
height:current_h + "px" 
}) 
}else{ 
D.css(img,{ 
width:current_w + "px", 
height:150 + "px" 
}) 
} 
}else{ 
if(img_width>330){ 
D.css(img,{ 
width:330 + "px", 
height:current_h + "px" 
}) 
}else{ 
D.css(img,{ 
width:img_width + "px", 
height:img_height + "px" 
}) 
} 
} 

[주 1:D.css 는 KISSY.DOM.css 이 고 kissy 라 이브 러 리 의 DOM 방법 을 참조 합 니 다.][주 2:javascript 으로 그림 의 크기 페이지 를 제어 하려 면 그림 이 완전히 불 러 올 때 까지 기 다 려 야 합 니 다.따라서 코드 는 window.onload 이벤트 에 포함 되 어야 합 니 다.그림 로드 속도 가 느 리 면...작은 결함 이 있 을 수 있 습 니 다.먼저 css 를 사용 하고 그 다음 에 js 를 추가 합 니 다.