IE および Firefox と互換性のある画像の自動スケーリングのための CSS および JS コードの共有_画像特殊効果

要件: 画像の幅1. max-width と max-height を使用して、画像を同じ比率で自動的に拡大縮小します。 コード:

コード コードは次のとおりです:

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

ie6 は css max-width をサポートしていないため、 max-heightなのでie6ではサイズを制御するにはJavaScriptスクリプトを使用する必要があります。
2. ie6 と互換性のある JavaScript スクリプトを使用します。コードは次のとおりです。

コードをコピーします。

var img_width = img.OffsetWidth;
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 イベントに含める必要があります。画像のロード速度が非常に遅い場合は、小さな欠陥がある可能性があります。