ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript は、Web ページ画像コードの均等な比率のスケーリングと、method_javascript スキルの呼び出しを実装します。

JavaScript は、Web ページ画像コードの均等な比率のスケーリングと、method_javascript スキルの呼び出しを実装します。

WBOY
リリース: 2016-05-16 17:41:25
オリジナル
879 人が閲覧しました

Web ページの画像を処理する場合、特に一部の画像リスト アプリケーションでは、画像サイズを均一にすることが困難です。画像サイズを直接設定すると、画像が伸びたり、ぼやけたりすることがあります。この記事で紹介するコードは、自動的に拡大縮小することができます。画像をロードした後に画像のサイズを変更します。
JavaScript:

コードをコピーします コードは次のとおりです。

< ="javascript " type="text/javascript">
< !--
// 説明: JavaScript を使用して Web ページ画像の均等なスケーリングを実現します
// 構成: http://www .CodeBit.cn
関数 DrawImage(ImgD,FitWidth,FitHeight)
{
var image=new Image();
image.src=ImgD.src;
if(image.width> ;0 && image.height>0)
{
if(image.width/image.height>= FitWidth/FitHeight)
{
if(image.width>FitWidth)
{
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
else
{
ImgD.width=image.width ;
ImgD .height=image.height;
}
}
else
{
if(image.height>FitHeight)
{
ImgD.height= FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
else
{
ImgD.width=image.height; =image.height;
}
}
}
}
< スクリプト>


🎜>コード:



コードをコピー


コードをコピー


コードは次のとおりです:
自動スケーリング後の効果
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート