widthタグのandheight属性を使用するかimg、CSS を使用して、画像の 1 つの寸法のみを指定すると、ブラウザは自動的に他の寸法を比例的にスケーリングすることに気付きました。
たとえば、100x150 の画像があり、width="50"またはを指定するwidth:50px;と、ブラウザーは自動的に高さを 75 ピクセルに設定します。
この動作はすべてのブラウザーに適用されますか? 時間を節約するために省略できますか? JavaScript で画像をプリロードして動的に挿入しているので、ダウンロード中に画像がレイアウトに影響することを心配する必要はありません。
はい、これはCSS2 仕様の一部です:
[...]「幅」に「自動」の計算値があり、「高さ」に他の計算値があり、要素に固有の比率がある場合。次に、「幅」の使用値は次のとおりです。
(used height) * (intrinsic ratio)
定義された CSS の幅または高さは、CSS2 準拠のブラウザーで適切にスケーリングされます (IE6 以降でテストしました)。
そして、これは非常に便利な機能だと思います。幅のレイアウトのフォーラムがあり800px、ユーザーが画像をアップロードできるとします。投稿の画像をmax-width:790px定義された高さなし (height:autoデフォルト) に設定すると、正しい縦横比を維持しながら、レイアウトを壊すことなく自動的に収まるようになります。きちんとしたもの。注: max-widthIE6 ではサポートされていません。
height明らかに、CSSを定義する場合も同じことが当てはまりますwidth:auto。
そして、ここにテスト用のFiddleがあります。どうやら、HTML 属性も事実上すべてのブラウザーで適切にスケーリングされます。しかし、一貫性を保ち、マークアップをきれいに保つために、要素のスタイル設定を CSS で行うことをお勧めします。スタイリングは CSS で行う必要があります。