1. ホーム
  2. html

[解決済み] 画像のサイズはimgタグのheight/width属性とCSSのどちらで定義すべきでしょうか?重複

2022-10-11 16:01:35

質問

の中で画像サイズを定義するのが良いコーディング方法なのでしょうか? img タグの widthheight の属性は?

<img src="images/academia_vs_business.png" width="740" height="382" alt="" />

または、width/heightを使ったCSSスタイルで?

<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />

それとも両方?

<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />

どのように解決するのですか?

私はここで流れに逆らって、コンテンツとレイアウトを分離するという原則(CSSの使用を示唆する回答を正当化するもの)が、画像の高さと幅には必ずしも適用されないと述べるつもりです。

各画像には、画像データから得られる、生来の、オリジナルの高さと幅があります。コンテンツ対レイアウトの枠組みでは、この派生した高さと幅の情報は、レイアウトではなくコンテンツであり、したがって、要素属性としてHTMLとしてレンダリングされるべきであると言えるでしょう。

これは alt のテキストに似ており、これも画像から派生したものと言えます。これはまた、任意のユーザエージェント(例えば音声ブラウザ)が、それをユーザに関連付けるためにその情報を持つべきであるという考えを支持するものです。少なくとも、アスペクト比は有用です("画像は幅15、高さ200")。そのようなユーザーエージェントは、必ずしも CSS を処理する必要はないでしょう。

この仕様では widthheight 属性は、実際の画像ファイルで伝えられている高さと幅を上書きするために使用することもできます。私は、このために使うことを勧めているのではありません。高さと幅を上書きするには、CSS(インライン、埋め込み、外部)が最良の方法だと思います。

つまり、何をしたいかに応じて、一方または他方を指定することになります。理想的には、元の高さと幅は常にHTML要素の属性として指定し、スタイリング情報はオプションでCSSで伝えるべきと思います。