---
title: "画像が縦長・横長に潰れるときの対処"
description: "サムネイルやヒーロー画像が縦に伸びたり横に潰れたりして困っている方へ。縦横比を崩さずに枠いっぱいに収める CSS の指定方法と、比率を保ったまま表示する考え方をケース別に整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/image-distorted"
markdown: "https://giga-site.com/articles/image-distorted/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 画像が縦長・横長に潰れるときの対処

サムネイルやヒーロー画像が縦に伸びたり横に潰れたりして、本来の比率と違って見える。これは多くの場合、画像の表示枠に幅と高さの両方を固定で指定し、元の縦横比を無視して引き伸ばしてしまっていることが原因です。この記事では、比率を保ったまま枠に収める object-fit と aspect-ratio の使い方を整理します。

> Source HTML: https://giga-site.com/articles/image-distorted
> Article index: https://giga-site.com/articles/index.md

## なぜ画像が潰れるのか

画像が潰れる典型は、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 を調整するたびに新しいリンクを配る必要はありません。エッジ配信で画像の表示も速く、レビューが滞りません。

## よくある質問

### 画像が縦長や横長に潰れるのはなぜですか。

表示枠に width と height を両方固定で指定し、その比率が元画像の縦横比と違うと、中身が枠に合わせて引き伸ばされ歪みます。object-fit を指定して比率を保つのが基本です。

### object-fitのcoverとcontainはどう使い分けますか。

枠いっぱいに敷き詰めたいなら cover、画像全体を必ず見せたいなら contain です。cover ははみ出し部分を切り取り、contain は余白を残して全体を収めます。

### coverで見せたい部分が切れてしまいます。

object-position で切り取りの基準位置を調整してください。人物の顔など見せたい箇所を枠の中心側へ寄せると、cover でも重要部分が切れにくくなります。

### レスポンシブで画像の比率を一定に保つには。

枠に aspect-ratio を指定し、中の img に object-fit: cover を組み合わせます。img へ本来の width と height 属性も入れておくと、読み込み時のレイアウトのガタつきも抑えられます。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [画像カードの高さが揃わずガタガタになるときの対処](https://giga-site.com/articles/aspect-ratio-image-card-uneven/index.md)
- [背景画像が表示されないときの原因と対処](https://giga-site.com/articles/background-image-not-showing/index.md)
- [画像がぼやける・粗く見えるときの対処（高解像度ディスプレイ）](https://giga-site.com/articles/image-blurry-retina/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)
- [公開後に動画が再生されないときの対処](https://giga-site.com/articles/video-not-playing/index.md)
- [公開したHTMLのフォームが送信できないときの対処](https://giga-site.com/articles/form-not-submitting/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "画像が縦長・横長に潰れるときの対処",
  "description": "サムネイルやヒーロー画像が縦に伸びたり横に潰れたりして困っている方へ。縦横比を崩さずに枠いっぱいに収める CSS の指定方法と、比率を保ったまま表示する考え方をケース別に整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/image-distorted",
  "url": "https://giga-site.com/articles/image-distorted",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "画像が縦長や横長に潰れるのはなぜですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "表示枠に width と height を両方固定で指定し、その比率が元画像の縦横比と違うと、中身が枠に合わせて引き伸ばされ歪みます。object-fit を指定して比率を保つのが基本です。"
      }
    },
    {
      "@type": "Question",
      "name": "object-fitのcoverとcontainはどう使い分けますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "枠いっぱいに敷き詰めたいなら cover、画像全体を必ず見せたいなら contain です。cover ははみ出し部分を切り取り、contain は余白を残して全体を収めます。"
      }
    },
    {
      "@type": "Question",
      "name": "coverで見せたい部分が切れてしまいます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "object-position で切り取りの基準位置を調整してください。人物の顔など見せたい箇所を枠の中心側へ寄せると、cover でも重要部分が切れにくくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "レスポンシブで画像の比率を一定に保つには。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "枠に aspect-ratio を指定し、中の img に object-fit: cover を組み合わせます。img へ本来の width と height 属性も入れておくと、読み込み時のレイアウトのガタつきも抑えられます。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```