ie 및 firefox_javascript 기술과 호환되는 이미지의 자동 크기 조정을 위한 CSS 및 js 코드 공유

이 기능은 주로 콘텐츠 페이지의 사진이 너무 크고 늘어져 페이지가 보기 흉해지는 문제를 해결하기 위한 것입니다. 필요한 친구는 이를 참조할 수 있습니다.

요구 사항: 사진 너비<=600px, 높이<=800 .

1. max-width, max-height를 사용하여 동일한 비율로 이미지 크기를 자동으로 조정하세요.

코드:

코드 복사 코드는 다음과 같습니다.

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

ie6에서는 css max-width, max-height를 지원하지 않기 때문에 ie6에서 크기를 조절하려면 javascript 스크립트를 사용해야 합니다.

2. ie6과 호환되도록 javascript 스크립트를 사용합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다:

var img_width = img.OffsetWidth;
var img_height = OffsetHeight; /img_height;
var current_h = (330*img_height)/img_width;
if(img_height>150){
if(img_width>330){
D.css(img,{
너비:330 "px",
높이:현재_h "px"
})
}else{
D.css(img,{
너비:현재_w "px",
높이:150 "px"
})
}
}else{
if(img_width>330){
D.css(img,{
너비: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를 추가하세요.

성명：

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