画像が縦長・横長に潰れるときの対処

なぜ画像が潰れるのか

画像が潰れる典型は、img や背景の表示枠に width と height を両方とも固定値で指定し、その比率が元画像の縦横比と違うケースです。枠の形に合わせて中身が無理やり引き伸ばされ、縦長や横長に歪みます。

サイズの違う写真をカードに並べるとき、枠の高さだけ揃えようとして起きることも多いです。枠を揃えること自体は正しい狙いですが、中身の引き伸ばし方を指定しないと比率が崩れます。

object-fitで枠に賢く収める

固定サイズの枠に画像を比率を保って収めたいときは object-fit が有効です。object-fit: cover は比率を保ったまま枠いっぱいに広げ、はみ出す部分を切り取ります。サムネイルやカード画像でよく使われます。

object-fit: contain は比率を保ったまま枠内に収まるように縮小し、余った部分は余白になります。画像全体を必ず見せたいロゴや商品写真などに向きます。

切り取りの基準位置は object-position で調整できます。cover で人物の顔が切れてしまう場合などに、見せたい部分を枠の中心へ寄せられます。

症状別チェック表

画像が縦長・横長に潰れるは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

比率を保って表示する手順

枠の作り方と画像側の指定を組み合わせて、潰れない表示にします。

1. まず width か height の一方だけを指定し、もう一方は auto にできないか検討する。
2. 枠の縦横比を固定したい場合は、枠に aspect-ratio を指定する。
3. 枠を固定したまま画像を収めるなら、img に width:100%; height:100% と object-fit: cover を指定する。
4. 全体を必ず見せたい画像は cover ではなく contain を使う。
5. cover で見せたい部分が切れるときは object-position で基準位置を調整する。

aspect-ratioで枠の比率を固定する

aspect-ratio を使うと、要素の縦横比そのものを指定できます。たとえば aspect-ratio: 16 / 9 と書けば、幅が変わっても高さが自動で 16:9 に追従し、レスポンシブでも比率が保たれます。

画像枠に aspect-ratio を指定し、その中の img に object-fit: cover を組み合わせると、画面幅が変わっても枠の形が一定で、中身も潰れない安定した表示になります。カードのサムネイル領域などで扱いやすい構成です。

さらに、img タグに本来の width と height 属性を入れておくと、ブラウザが読み込み前から比率を把握でき、表示時のレイアウトのガタつきも抑えられます。

実機での見え方を確認してもらう

画像の切り取りや余白の出方は、画面幅や画像の中身によって印象が変わります。cover で大事な部分が切れていないか、contain で余白が間延びしていないかは、実際に表示して見てもらうのが確実です。

ギガサイト便なら、CSS や画像を含むものは ZIP にまとめてドロップすれば、その場で 〇〇.giga-site.com の共有 URL が発行されます。相手はリンクを開くだけで、複数の端末幅で画像の見え方を確認できます。

同じ URL のまま中身を差し替えられるので、object-fit や object-position を調整するたびに新しいリンクを配る必要はありません。エッジ配信で画像の表示も速く、レビューが滞りません。