이 기능은 주로 콘텐츠 페이지의 사진이 너무 크고 늘어져 페이지가 보기 흉해지는 문제를 해결하기 위한 것입니다. 필요한 친구는 이를 참조할 수 있습니다.
요구 사항: 사진 너비<=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를 추가하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
