はじめに
カード一覧や記事一覧では、画像ごとの縦横比がばらつくと、レイアウトが不ぞろいに見えやすくなります。そのため、画像のアスペクト比を揃えたい場面はかなり多いです。
自分の中では、これまで「CSS で見た目を揃える」という発想が中心でした。ですが調べてみると、Astro ではビルド時に画像自体をその比率で生成するというアプローチがあり、WordPress にもかなり近い仕組みがあります。
ここでは、まず画像比率を揃える方法には何があるかを整理し、そのうえでこのブログではどの方法を使っているかを見ます。
画像の比率を揃える方法
大きく分けると、考え方は次の2つです。
- CSS で見た目を揃える
- 画像自体を揃えたサイズで生成する
1. CSS で見た目を揃える
たとえば固定比率の枠を作って、その中に画像を object-fit: cover; で入れる方法です。
この方法の利点は、実装がわかりやすいことです。画像タグの出し方を大きく変えなくても、CSS 側でカードの見た目を統一できます。
一方で、場合によっては元の大きな画像をそのまま配信したまま、見た目だけ切っている状態になります。表示上は揃っていても、通信量や画像処理の観点では無駄が残ることがあります。
2. 画像自体を揃えたサイズで生成する
もう一つは、一覧用やカード用に、最初から同じ比率の画像ファイルを生成して使う方法です。
こちらは見た目を揃えるだけでなく、
- 転送量を減らしやすい
- 一覧のレイアウトを安定させやすい
- サムネイルとして扱いやすい
という利点があります。
ただし、自動クロップになる場合は重要な部分が切れる可能性もあるので、すべての場面で最適というわけではありません。
このブログではどの方法を使っているか
このブログでは、astro:assets の <Image> を使っていて、画像自体をビルド時に生成する方法を取っています。
記事詳細ページでは、ヒーロー画像に次のような指定があります。
<Image width={1020} height={680} src={heroImage} alt="" />また、一覧側でも次のように固定サイズを渡しています。
<Image width={720} height={480} src={post.data.heroImage} alt="" />ここでポイントなのは、width と height が表示用の属性だけではなく、変換条件にもなっていることです。astro:assets は sharp を使って、そのサイズの画像を出力します。
つまりこのブログは、CSS だけで見た目を揃えているのではなく、Astro の画像パイプラインで一覧向けの比率に揃えた画像を作る構成になっています。
元画像は1枚でも、用途別に別画像が生成される
ここで少し混乱しやすいのは、src/assets には元画像が1枚しかないのに、一覧と詳細でサイズが違って見える点です。
このブログでは、たとえば src/assets/blog/hero/2026-04-13.png のように元画像は1枚だけ置いておき、そこから用途ごとに派生画像を作っています。
- 記事詳細用:
1020x680 - 一覧カード用:
720x480
つまり、元画像をそのまま使い回しているのではなく、同じ元画像から複数の出力画像を生成しているということです。
ビルド後は dist/_astro/ にハッシュ付きの別ファイルとして出力されます。ファイル名自体はビルドごとに変わることがありますが、考え方としては次のようになります。
src/assets/blog/hero/2026-04-13.png
├─ 詳細用 1020x680 の WebP
└─ 一覧用 720x480 の WebPこの点も WordPress の add_image_size() に近く、元画像1枚をマスターにして、表示用途ごとのサイズを作るという理解でほぼ合っています。
Astro ではなぜそれができるのか
astro:assets の Image は、src/assets の画像をそのまま表示するだけではなく、ビルド時にリサイズや形式変換を行えます。このプロジェクトでは sharp を依存に入れているため、画像変換の実体は Sharp です。
比率が異なる状態で width と height を両方渡すと、画像をその枠に合わせる必要があります。このとき Astro 側では、fit の既定値が cover です。考え方としては CSS の object-fit: cover と近く、枠を埋める代わりに、はみ出した部分を切ります。
そのため、一覧やカード用に同じ比率を揃える、という用途に向いています。
WordPress にも近い仕組みがある
この考え方は WordPress でもよく使われます。代表例は add_image_size() です。
add_image_size( 'card-thumb', 720, 480, true );この第4引数の true は、必要なら切り抜いてでもそのサイズに揃えるという意味です。アップロードした元画像とは別に、カード用の比率に揃えた画像を生成して使えます。
発想としては、
- Astro の
<Image width={720} height={480}> - WordPress の
add_image_size( 'card-thumb', 720, 480, true )
がかなり近いです。
違いをざっくり言うと、
- Astro はビルド時に変換する
- WordPress はアップロード時に複数サイズを生成して保存する
という運用上の差があります。
CSS で揃える方法と、画像生成で揃える方法の違い
整理すると、それぞれ次のような向き不向きがあります。
-
CSS で揃える
- 実装しやすい
- 見た目だけ整えたいときに手軽
- 元画像の配信が重いままになりやすい
-
画像生成で揃える
- 転送量やレイアウトの面で合理的
- サムネイル用途に向く
- 画像内容によっては見せたい部分が切れる
自分にとっては、「比率を揃える = CSS の仕事」という見方だけでなく、画像最適化の一部として比率を揃えるという見方が増えたのが大きかったです。
まとめ
| 観点 | 内容 |
|---|---|
| 比率を揃える方法 | CSS で見た目を揃える / 画像自体を揃えたサイズで生成する |
| このブログの方法 | astro:assets + Image + sharp でビルド時に生成 |
| 元画像と出力画像の関係 | 元画像は1枚でも、一覧用と詳細用の派生画像を別々に作る |
| Astro での考え方 | width と height は表示だけでなく変換条件にもなる |
| WordPress で近いもの | add_image_size() による別サイズ画像の生成 |
| 向いている場面 | 一覧カード、サムネイル、レイアウトを安定させたい UI |
カード一覧などで画像の比率を揃えたいとき、CSS で整える方法だけでなく、Astro や WordPress の画像生成機能で揃えるという選択肢もある、と整理できました。