IE および firefox_javascript スキルと互換性のある画像の自動スケーリングのための CSS および JS コードの共有

この機能は主に、コンテンツ ページの画像が大きすぎてページが見苦しくなる問題を解決するためのものです。必要な友達はそれを参照できます。

要件:画像の幅
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;
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",
高さ: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: 画像のサイズを制御するには、ページは画像が完全に読み込まれるまで待機する必要があるため、画像の読み込み速度を向上させるコードを window.onload イベントに含める必要があります。非常に遅いので、小さな欠陥がある可能性があります]

したがって、これら 2 つを組み合わせることができます。最初に css を使用し、後で js を追加します。