요구 사항: 이미지 너비<=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 이벤트에 코드를 포함시켜야 합니다. 이미지 로딩 속도가 매우 느린 경우 작은 결함이 있을 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
