ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は範囲外の画像を制御するために画像を比例的に拡大縮小します_JavaScript スキル

JavaScript は範囲外の画像を制御するために画像を比例的に拡大縮小します_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 17:26:291231ブラウズ

js は画像を比例的に拡大縮小します。Web ページが比較的大きな画像を読み込むと、Web ページが変形してページが醜くなることがよくあります。そこで、JS を使用して画像を一定の範囲を超えて制御することを考えました。 , Script House はページ レイアウトを安定させます。このコード スニペットはこの機能を完成させます。コードは非常に簡潔で、効果は非常に優れています。

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

< ;title> 画像を比例的に拡大縮小します<script>function <br>DrawImage(ImgD,iwidth,iheight){ //パラメータ (画像、許容される幅、許容される高さ) <br>var <br>image=new Image(); image.src=ImgD.src; <br>if(image.width>0 <br>&& image.height>0){ if(image.width/image.height>= <br>iwidth/iheight ){ if(image.width>iwidth){ <br>ImgD.width=iwidth; <br>ImgD.height=(image.height*iwidth)/image.width; <br>ImgD. width=image.width; <br>ImgD.height=image.height; <br>} <br>}else{ <br>if(image.height>iheight){ <br>ImgD.height=iheight; >ImgD.width=(image.width*iheight)/image.height; <br>ImgD.width=image.width; <br>ImgD.height=image.height; 🎜>} <br>} <br>} <br></script>
src=http://www.jb51.net/uploadfile /2013/0803/20130803034531502.jpg"
alt="自動スケーリング後の効果"

width="100"

height="100"

onload ="javascript:DrawImage(this,80,80)"

/>

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。