JS CSS 画像の自動スケーリングと適応サイズ_JavaScript スキル

CSS 制限を追加しました:

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

div img {} {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; IE7、FF、およびその他の非 IE ブラウザでは、最大幅は 600px です。ただし、IE6では動作しません。
◎ width:600px; 画像サイズはどのブラウザでも 600px です;
◎ 画像サイズが 600px より大きい場合は、自動的に 600px に縮小されます。 IE6で有効です。
◎ overflow:hidden; 画像サイズの制御失敗による伸びや変形を避けるため、余分な部分を非表示にします。 < スクリプト言語="JavaScript">
var
for( i = 0; i < document . getElementsByTagName("img") . length; i )

{ document . getElementsByTagName("img")[i]; //自動的に拡大縮小できるように、高さまたは幅のどちらか一方のみを判断することをお勧めします if ( imgObj . width > 500 ) / /画像の幅を判断し、700より大きい場合は700に設定します。値は自分で変更できます { imgObj . width = 500 }

if ( imgObj . height > 700 ) // 画像の高さを決定し、 700 より大きい場合は 700 に設定します。

{
imgObj . }
}



別の画像 制御するには、これを使用します:




コードをコピーします


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


<script> var abc=document.getElementById("abc");<br>var imgs=abc.getElementsByTagName ("img");<br>for (var i=0,g;g=imgs[i];i )<div class="codetitle">g.onload=function(){if (this.width>300){this.width =300}else{if (this.height>300)this.height=300}}<span></script>テストは IE と FF で合格しました。