Webページの写真のサイズは同じようです。複数の写真がある最も一般的な記事のページでは、画像のサイズは通常、ページの幅と同じです。このようにして、ページはまっすぐな円筒形のように見えます。このレイアウトが多すぎると、非常に単調に感じるでしょう。この状況は、主に昔ながらのブラウザの制限によるものだと思います。ただし、最新のブラウザー（Firefox/Google/IE11）の人気により、ブラウザはページデザインの制限が少なくなり、Webプログラマーの想像力が大幅に発揮されます。
たとえば、Leng Zhi：すべてのウィンドウがどのようにしているのか知っていますか？この記事では、多くの写真がテキスト幅の限界を超えており、人々に驚異的で驚異的な感覚を与えています。同時に、大きな写真が実際のサイズで表示され、人々により衝撃的な感覚を与えます。
ただし、技術的には、テキストの最大幅で画像を簡単に制限できるため、それらはすべて幅を維持し、テキストの幅をたどらない場合、各画像のサイズが必要です。サーバーで編集するときに、画像の元のサイズを宣言できます。より柔軟な方法は、ページにJSの一部を配置し、画像の表示サイズを動的に変更することにより、画像の元のサイズを動的に取得することです。これは、古いテキストの最大幅と互換性があり、必要に応じて写真を元のサイズに表示することもできます。
JavaScriptを使用してブラウザ側の画像の元のサイズを取得するにはどうすればよいですか？
コードコピーは次のとおりです。
var img = $（ "＃img_id"）; //私のIMGエレムを取得します
var pic_real_width、pic_real_height;
$（ "<img/>"）// CSSの問題を回避するために画像のメモリコピーを作成します
.attr（ "src"、$（img）.attr（ "src"））
.load（function（）{
pic_real_width = this.width; //注：$（this）.width（）はしません
pic_real_height = this.height; //メモリ画像で作業します。
}）;
WebKitブラウザ（Google Chromeなど）は、画像のロードされたイベント後にのみ高さと幅の値を取得できます。したがって、タイムアウト関数を使用して遅延を待つことはできません。最良の方法は、画像のオンロードイベントを使用することです。
画像のサイズに対するCSSの影響を回避するために、上記のコードは計算のために画像をメモリにコピーします。
ページが昔ながらのページの場合、必要に応じてこのコードをページの下部に埋め込むことができ、元のページを変更する必要はありません。