HTMLで画像を表示するとき、imgタグにwidthやheightを指定することがあります。
「縦横比を保ったままサイズを調整したい」と思って、height="auto"と書いてしまうのは、実はよくある間違いです。
この記事では、画像の比率を崩さずに表示するための正しい書き方を、シンプルに解説します。
目次
よくある間違い：height="auto"と書いてしまう
多くの初心者や中級者が、画像の縦横比を保つために imgタグにheight="auto"と書いてしまいます。
しかし、HTMLの仕様上、height属性には数値（ピクセルなど）しか指定できず、autoは無効な値です。height="auto"を指定したところで、ブラウザは正しく解釈せず、意図したサイズ調整はできません。
一方、CSSではheight: auto;が有効なため、HTMLでも同じと思い込んで使われているのかもしれません。
widthだけ数値指定し、heightにautoと書いて縦横比が維持できると勘違いしていました。HTMLとCSSでのサイズ指定の違い
imgタグ（画像）のサイズを指定する際の、HTMLとCSSの違いをかんたんにまとめました。
| 項目 | HTML | CSS |
|---|---|---|
| 指定可能な値 | 数値（単位はピクセル固定） | 数値（px, %, vw, vhなど色んな単位） |
| 単位の指定 | 不要（ピクセルとして扱われる） | 必須（例：width: 100px; height: 50%;） |
| 自動調整 | 不可。autoは無効な値 | 可能。autoで元の比率を保てる |
| 指定の目的 | 表示サイズを数値で指定 | 表示サイズの柔軟な調整 |
| 優先順位 | CSSより低い（CSSで上書き可能） | HTMLを上書き可能 |
このように、HTMLとCSSでは仕様が異なるため、正しく使い分けないと意図しない表示崩れの原因になってしまいます。
画像の縦横比を保つ正しい書き方
画像の比率を崩さずに表示したい場合は、HTMLではwidthのみに数値を指定し、heightは省略します。
ただ省略するだけで、縦横比を保ったまま自動で表示されます。
<img src="sample.jpg" alt="" width="450" />このように、heightは書かないのが正解です。
CSSやstyle属性ならautoも使える
HTMLではheight="auto"は無効でしたが、CSSでは有効です。
たとえば、画像を親要素の幅に合わせつつ、比率を保ちたい場合は次のように書きます。
<img src="sample.jpg" alt="" style="width: 100%; height: auto;" />style属性はCSSと同じ働きをするため、height: auto;も有効です。画像の縦横比を保ったまま柔軟にサイズを調整できます。
WordPressの場合は？
WordPressでは、画像をアップロードすると自動的にwidthとheightの属性がHTMLに挿入されます。これは元画像のサイズに基づいて出力されるもので、height="auto"とは異なります。
画像の縦横比を保ちつつサイズ調整したい場合は、CSSもしくはstyle属性でwidthを指定し、height: auto;とセットで使うのが安心です。
widthだけを指定し、height属性を削除しても基本的には問題ありませんが、テーマやカスタマイズによって両属性の指定が必要なケースもあるため、CSSでの制御を推奨します。
まとめ
HTMLでheight="auto"は無効です。画像（imgタグ）の縦横比を保つには、widthだけを指定し、height属性は省略するのが基本です。
CSSではheight: auto;が有効なので、レスポンシブ対応や柔軟なサイズ調整もできます。HTMLとCSSを正しく使い分けて、意図しない表示崩れを防ぎましょう。
初心者向けのおすすめ記事
そもそもWebサイトはどのような仕組みで表示されているのか。当記事では、それらを知るための基礎的な用語をご紹介いたします。 Webサイトとは Webサイト（≒ホームページ）とは、平たくいえば、複数のページの組み合わせに過ぎません。各ページは一つ一つのファイルになっており、その...
「ホームページ」という言葉は身近なものですが、「ウェブサイト」との違いやその種類についてご存じですか？ 本稿では、ホームページとは何か、Webサイトとの違い、そして様々な種類のホームページとその役割について、初心者の方にもわかりやすく解説していきます。 ホームページとは？ ホー...
Webサイト（ホームページ）を構成しているのパーツの基本用語をまとめました。 サイトのどの部分を何と呼ぶかがわかるようになります。業界では当たり前でも、一般の方やWeb初心者にとってはわからないこともありますので、参考になれば嬉しいです。 Webサイトを構成するページやパーツ We...
コメント