IE 및 Firefox_Image 특수 효과와 호환되는 이미지의 자동 크기 조정을 위한 CSS 및 js 코드 공유

요구 사항: 이미지 너비<=330px, 높이<=150.
1. max-width 및 max-height를 사용하여 동일한 비율로 이미지 크기를 자동으로 조정하세요. 코드:

코드를 복사하세요. 코드는 다음과 같습니다.

img{max-width: 330px;max-height: 150px;}

IE6에서는 CSS max-width를 지원하지 않기 때문에, max-height이므로 ie6에서는 크기를 제어하려면 javascript 스크립트를 사용해야 합니다.
2. ie6과 호환되도록 자바스크립트 스크립트를 사용하세요.

코드를 복사하세요 다음과 같습니다:

var img_width = img.OffsetWidth;
var img_height = OffsetHeight
var current_w = (150*img_width)/img_height; *img_height)/img_width;
if(img_height>150){
if(img_width>330){
D.css(img,{
width:330 "px",
높이 :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: D.css는 KISSY.DOM.css입니다. javascript를 사용하여 이미지 크기를 조절하려면 이미지가 완전히 Load될 때까지 기다려야 하므로 window.onload 이벤트에 코드를 포함시켜야 합니다. 이미지 로딩 속도가 매우 느린 경우 작은 결함이 있을 수 있습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.