HTMLで画像を表示できても、「大きすぎて画面からはみ出す」「幅を変えたら縦に伸びた」ということがあります。画像サイズは、HTMLのwidth・height属性と、CSSのwidth・heightプロパティを役割ごとに使い分けるのがポイントです。
この記事では、画像の縦横比を保ったままサイズを変える基本から、スマートフォン対応、固定枠への切り抜き、srcsetとsizesまで解説します。コードをコピーして、ブラウザの幅を変えながら試してみてください。
HTML画像サイズの基本はwidth・height属性とCSSの併用
最初に、通常の本文画像で使いやすい書き方を確認しましょう。HTMLには画像ファイル本来の幅と高さを記述し、実際の表示サイズはCSSで調整します。
<img
class="article-image"
src="images/mountain.jpg"
width="1200"
height="800"
alt="湖の向こうに見える雪山"
/>.article-image {
display: block;
max-width: 100%;
height: auto;
}max-width: 100%により、画像は親要素より大きくなりません。height: autoを組み合わせると、横幅に合わせて高さが自動計算され、元の縦横比を保てます。
HTMLのwidth="1200"とheight="800"は、画像ファイル本来の寸法を単位なしの整数で指定しています。画像が読み込まれる前からブラウザが縦横比と必要な空間を計算できるため、読み込み時に後続の文章が動くレイアウトシフトも抑えられます。
画像サイズの指定は、目的によって上の3パターンに分けると整理しやすくなります。まずは比率を保った縮小を覚え、決まった形のカードやサムネイルだけobject-fitを使いましょう。
HTMLのwidth属性・height属性で画像サイズを指定する
HTMLだけでサイズを指定する場合は、img要素へwidth属性とheight属性を追加します。値はCSSと違い、pxを付けずに整数で書きます。
<img
src="images/cafe.jpg"
width="640"
height="427"
alt="木製テーブルに置かれたコーヒー"
/>この例では、画像の固有サイズを横640ピクセル、縦427ピクセルとしてブラウザへ伝えています。width="640px"のように単位を書くのは誤りです。
幅と高さには画像ファイル本来の寸法を書く
HTMLのwidthとheightには、画像ファイルの実際のピクセル寸法を両方書く方法が基本です。表示を小さくしたい場合でも、HTMLの値を無理に変更せず、CSSで見た目の大きさを調整できます。
画像の情報は、Windowsならファイルの「プロパティ」、macOSなら「情報を見る」で確認できます。WordPressを使っている場合は、メディアライブラリの添付ファイル詳細にも寸法が表示されます。
片方だけ指定すると縦横比は保たれる
widthだけを指定し、heightを指定しなければ、高さは画像本来の縦横比から自動で決まります。反対にheightだけを指定した場合は、幅が自動計算されます。
<img src="images/cafe.jpg" width="320" alt="木製テーブルに置かれたコーヒー" />ただし、レイアウトシフトを防ぐ目的では両方の属性を記述するほうが確実です。「比率を保つため片方を省く」のではなく、HTMLでは本来の寸法を両方書き、CSSではheight: autoを使うと覚えてください。
CSSで画像の表示サイズを変更する
CSSのwidthとheightは、ブラウザ上で画像をどの大きさに見せるかを指定します。HTML属性よりも、画面幅や配置に応じた柔軟な調整ができます。
ピクセルで固定サイズにする
常に同じ横幅で表示するなら、widthへpxを指定します。高さはautoにして、画像が変形しないようにしましょう。
.profile-image {
width: 240px;
height: auto;
}この指定では、画像の表示幅は240ピクセルです。ただし、スマートフォンの表示領域が240ピクセルより狭いケースまで考えるなら、次のmax-widthを使うほうが安全です。
親要素からはみ出さないレスポンシブ画像にする
本文中の画像には、max-width: 100%とheight: autoの組み合わせがよく使われます。親要素が狭いときだけ画像を縮小し、画像本来の幅より広い場所では無理に拡大しません。
.responsive-image {
display: block;
max-width: 100%;
height: auto;
}width: 100%は、画像が小さくても親要素の幅まで拡大します。一方、max-width: 100%は画像本来の幅を上限にするため、不必要な引き伸ばしを避けたい本文画像に向いています。
img要素の基本的な書き方やsrc・alt属性から確認したい方は、次の記事も参考にしてください。
CSSのwidthで使える単位や、要素幅の計算方法を詳しく知りたい場合はこちらで解説しています。
縦横比が崩れて画像が伸びる原因と直し方
画像が縦や横に伸びる主な原因は、元画像と異なる比率のwidthとheightを同時にCSSで指定していることです。たとえば横長の画像へ正方形のサイズをそのまま指定すると、内容が押しつぶされます。
/* 元画像が横長なら、この指定では変形します */
.photo {
width: 300px;
height: 300px;
}枠の形を固定する必要がなければ、height: autoへ変更します。横幅を基準に高さが計算され、元の比率へ戻ります。
.photo {
width: 300px;
height: auto;
}固定サイズの枠にはobject-fitを使う
商品カードやプロフィール一覧など、すべての画像を同じ大きさの枠へそろえたい場面では、幅と高さを固定したうえでobject-fitを使います。
<img
class="card-image"
src="images/product.jpg"
width="1200"
height="800"
alt="白いテーブルに置かれた商品"
/>.card-image {
width: 320px;
height: 180px;
object-fit: cover;
object-position: center;
}object-fit: coverは縦横比を保ったまま枠全体を埋め、はみ出す部分を切り取ります。object-positionでは、切り抜くときに画像のどこを中心にするかを調整できます。
画像全体を切らずに枠へ収めたい場合は、object-fit: containへ変更します。ただし、画像と枠の比率が違うと余白ができます。「全面を埋めるならcover」「全体を見せるならcontain」と覚えると選びやすいです。
画面いっぱいのメイン画像を作る
ヒーロー画像やメインビジュアルを親要素の横幅いっぱいにするなら、width: 100%を使います。高さをclamp()で調整すると、スマートフォンから大きな画面まで極端な高さになりにくくなります。
<img
class="hero-image"
src="images/hero.jpg"
width="1600"
height="900"
alt="海沿いに広がる街の風景"
/>.hero-image {
display: block;
width: 100%;
height: clamp(280px, 50vw, 640px);
object-fit: cover;
}100%は親要素の幅に対する割合です。画面幅を表す100vwとは基準が異なるため、ページの余白やスクロールバーまで考える必要がない通常のレイアウトでは、まずwidth: 100%を試してください。
srcsetとsizesで画面に合う画像ファイルを選ばせる
CSSで表示サイズを小さくしても、読み込む画像ファイル自体が小さくなるわけではありません。スマートフォンに必要以上に大きな画像を配信すると、通信量や表示速度に影響します。
srcsetには候補となる画像と実際の横幅を、sizesには画面条件ごとの表示幅を記述します。ブラウザは画面幅や解像度をもとに、適したファイルを選びます。
<img
src="images/mountain-1200.jpg"
srcset="
images/mountain-480.jpg 480w,
images/mountain-800.jpg 800w,
images/mountain-1200.jpg 1200w
"
sizes="(max-width: 600px) 100vw, 800px"
width="1200"
height="800"
alt="湖の向こうに見える雪山"
/>480wなどの値は、各ファイルが持つ実際の横幅です。上のsizesは「画面幅600ピクセル以下では画面幅いっぱい、それより広い画面では800ピクセルで表示する」という目安をブラウザへ伝えています。
WordPressは画像をアップロードすると複数サイズを生成し、投稿へ挿入した画像にsrcsetとsizesを出力することがあります。手書きHTMLの場合は、実在する画像ファイルの寸法とパスを確認して指定してください。
画面幅に合わせたレイアウト全体の考え方は、次の記事で詳しく解説しています。
画像を横並びにするときのサイズ指定
画像カードを横並びにする場合は、画像へ個別に30%などを指定するより、親要素で列数を管理すると調整しやすくなります。次の例ではCSS Gridを使い、各カード内の画像を同じ比率へそろえます。
<div class="gallery">
<img src="images/photo-1.jpg" width="800" height="600" alt="森の風景" />
<img src="images/photo-2.jpg" width="800" height="600" alt="海の風景" />
<img src="images/photo-3.jpg" width="800" height="600" alt="街の風景" />
</div>.gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.gallery img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
@media (max-width: 600px) {
.gallery {
grid-template-columns: 1fr;
}
}aspect-ratio: 4 / 3は、表示枠の横幅と高さの比率を4対3にします。画面幅600ピクセル以下では1列へ切り替わるため、スマートフォンでも窮屈になりません。
横並びの基本をFlexboxから学びたい方は、こちらも確認してみてください。
画像サイズを変更できないときの確認ポイント
CSSのセレクタが画像に一致しているか
クラス名の書き間違いや、HTMLへクラスを付け忘れているとCSSは反映されません。HTMLがclass="photo"なら、CSSは.photoで指定します。
より強いCSSに上書きされていないか
同じ画像へ複数のルールが適用されていると、詳細度が高いセレクタや後に書かれたルールが優先されることがあります。ブラウザの開発者ツールで対象画像を選び、取り消し線が付いたプロパティを確認しましょう。
画像がぼやけていないか
小さな画像ファイルをCSSで大きく表示しても、細部の情報は増えないため粗く見えます。表示幅以上の画像を用意し、高解像度画面も考慮してsrcsetで候補を渡すと改善できます。
alt属性の内容が画像を説明しているか
alt属性はサイズ調整とは別の役割ですが、画像を理解できない環境へ代替テキストを伝える重要な属性です。「画像」やファイル名だけではなく、その画像が文章の中で伝えている内容を簡潔に書きます。
意味を持たない装飾画像ならalt=""とします。意味のある画像でalt属性そのものを省くのは避けてください。
HTML画像サイズのよくある質問
HTML属性とCSSはどちらが優先されますか？
表示上の幅や高さにCSSが指定されている場合、通常はCSSの値が使われます。ただし、HTMLのwidth・height属性は画像の固有寸法と縦横比をブラウザへ伝え、読み込み前の空間確保にも役立ちます。
HTMLのwidth属性に100%は使えますか？
img要素のwidth属性は、ピクセル数を表す単位なしの整数で指定します。親要素に対する割合で表示したい場合は、CSSでwidth: 100%やmax-width: 100%を使ってください。
画像ファイルそのものの容量も小さくなりますか？
HTMLやCSSで表示サイズを変えても、画像ファイルのピクセル数やファイル容量は変わりません。表示速度を改善するには、用途に合う寸法へ画像を書き出し、WebPやAVIFなどの形式、圧縮、srcsetも検討します。
まとめ
HTMLのwidth・height属性には画像本来の寸法を両方書き、CSSで表示サイズを調整するのが基本です。通常の画像にはmax-width: 100%とheight: autoを使うと、親要素からはみ出さず縦横比も保てます。
決まったサイズの枠を埋めたい場合はobject-fit: cover、画像全体を見せたい場合はobject-fit: containを使います。ブラウザの幅を狭めて表示を確認し、ぼやけやレイアウトシフトも含めて調整してみてください。