JavaScriptを使用して画像の実際のサイズを取得する方法の詳細な説明

Web ページ上の画像サイズはすべて同じであるように見えます。よく見かける複数の写真を使った記事ページでは、写真の大きさとページの幅が同じで、ページが直筒のように見えますが、このレイアウトが多すぎると、ページの幅が狭くなってしまいます。とても単調に感じます。この状況の原因は、主に古いブラウザの制限によるものだと私は考えています。しかし、最新のブラウザ (Firefox/Google/IE11) の普及により、ブラウザのページ デザインに対する制限はますます少なくなり、Web プログラマーの想像力を大いに活用できるようになりました。

たとえば、トリビア: すべてのウィンドウの [x] がどこから来たか知っていますか?この記事では、文字幅の制限を超えた写真が多数使用されており、凹凸感を与えていますが、同時に大きな写真を実寸で表示することで、より衝撃的な印象を与えています。

しかし、技術的には、テキストの最大幅で画像を簡単に制限して、すべての画像が同じ幅を維持できるようにすることができます。テキストの幅を制限する代わりに、各画像に独自のサイズを持たせる必要があります。 。サーバー側で編集するときに画像の元のサイズを宣言できます。より柔軟な方法は、ページ上に js を配置することで画像の元のサイズを動的に取得し、画像の表示サイズを動的に変更することです。これは、テキスト幅を最大化する古い方法と互換性があるだけでなく、必要に応じて画像を元のサイズで表示することもできます。

JavaScriptを使用してブラウザ側で画像の元のサイズを取得するにはどうすればよいですか?

var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Webkit ブラウザ (Google Chrome など) は、画像のロード イベント後にのみ高さと幅の値を取得できます。したがって、タイムアウト機能を使用して待機を遅らせることはできず、イメージの onload イベントを使用するのが最善の方法です。

画像のサイズに対する CSS の影響を避けるために、上記のコードは計算のために画像をメモリにコピーします。

ページが古いページの場合は、必要に応じてこのコードをページの下部に埋め込むことができます。元のページを変更する必要はありません。

stackoverflow を参照してください

推奨チュートリアル: "javascript 基本チュートリアル"

以上がJavaScriptを使用して画像の実際のサイズを取得する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。