高さがそろわない原因
カードの高さがばらつく主因は、画像ごとに縦横比が違うことです。横長と縦長の写真が混在すると、画像領域の高さが変わり、その下のテキスト位置も連動してずれます。結果として並べたカードの下端がそろいません。
テキストの行数差も影響します。タイトルが1行のものと2行のものが混ざると高さが変わります。まずは画像領域の比率を固定することが、見た目を整える第一歩です。
aspect-ratioで比率を固定する
aspect-ratioプロパティを使うと、要素の縦横比を一定に保てます。たとえば画像を入れるラッパーに16対9や4対3などの比率を指定すれば、元画像のサイズに関係なく一定の高さの枠が確保されます。
比率を固定した枠の中に画像を収めることで、すべてのカードの画像領域が同じ高さになり、グリッドの上端だけでなく画像下のテキスト開始位置もそろいます。
症状別チェック表
画像カードの高さが揃わずガタガタになるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
object-fitで切り抜きを制御する
比率を固定した枠に縦横比の違う画像を入れると、そのままでは引き伸ばされて歪みます。これを防ぐのがobject-fitです。coverを指定すると枠いっぱいに広げつつ、はみ出した部分を切り取って歪みを防ぎます。
被写体が中央にない写真では、object-positionで表示位置を調整できます。containを使えば切り取らずに全体を収められますが余白が出るため、デザインに応じて使い分けます。
カードをそろえる手順
次の順で整えると安定します。
- 画像を囲むラッパー要素にaspect-ratioで縦横比を指定する
- 画像の幅と高さを枠いっぱいに広げる
- object-fitをcoverにして歪みを防ぎ、はみ出しを切り取る
- 必要に応じてobject-positionで表示位置を調整する
- テキスト行数の差はflexやgridでカード自体の高さもそろえる
レビュー共有で並びを確認する
カードの揃い方は実際のデータを並べてみないと判断しにくいものです。多様な縦横比の画像が混ざる本番に近い状態で確認できると、切り抜き位置や比率の妥当性を判断しやすくなります。
ギガサイト便に画像入りのHTMLとCSS/JSをZIPでまとめてドロップすれば共有URLが発行され、CDNのエッジ配信で画像も含めて素早く表示されます。比率を変えた版を同じURLのまま差し替えれば、4対3と16対9などの並びを同条件で見比べられます。
よくある質問
画像の縦横比がバラバラでカードがガタつきます。
画像を囲むラッパーにaspect-ratioで一定の比率を指定すると、画像領域の高さがそろいます。あわせてobject-fitをcoverにして歪みとはみ出しを抑えてください。
比率を固定したら画像が引き伸ばされて歪みます。
object-fitをcoverにすると、枠いっぱいに広げつつはみ出した部分を切り取るため歪みません。被写体の位置はobject-positionで調整できます。
画像はそろったのにカードの高さがまだ違います。
タイトルや本文の行数差が原因です。カードを並べる親にflexやgridを使い、行内のカード高さをそろえる指定を加えると下端まで整います。
画像を切り取らずに全体を見せたいです。
object-fitをcontainにすると切り取らずに全体を収められます。ただし枠との比率差で余白が出るため、背景色や配置でデザインを整えてください。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。