overflow hidden 効かない img

CSS3 を使用した overflow: hidden による画像の正方形自動調整

この記事では、CSS3 の `overflow: hidden` プロパティを使用して、任意の比率の画像を正方形にトリミングして表示し、画像の内容を中央に保つ方法について説明します。

実装原理

  • `padding-top` プロパティを使用して、親要素の幅に基づいて高さを動的に設定し、正方形のコンテナを実現します。
  • 親要素に `overflow: hidden` を設定し、コンテナからはみ出した画像の内容を非表示にします。
  • `transform` プロパティを使用して、画像の拡大縮小と配置を行い、画像の内容を中央に表示します。

コード例


<div class="image-container">
  <img src="sample.jpg" alt="サンプル画像">
</div>


.image-container {
  /* コンテナを正方形にする */
  position: relative;
  width: 200px;
  padding-top: 100%; /* 幅と同じ比率で高さを設定 */
  overflow: hidden; 
}

.image-container img {
  /* 画像をコンテナに合わせて拡大縮小・配置 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像のアスペクト比を維持したままトリミング */
}

メリット

  • コードが簡潔でわかりやすく、メンテナンスが容易です。
  • 互換性が高く、主要なブラウザでサポートされています。
  • 画像のサイズや位置を簡単に調整できます。

応用シーン

  • 画像を正方形にトリミングして表示する必要がある場合に適しています。例：
    • ウェブサイトのプロフィール画像
    • 商品リスト
    • 画像ギャラリー

関連情報

よくある質問

Q1: `object-fit: cover;` とは何ですか？

A1: `object-fit` プロパティは、置換要素（例：imgタグ）の内容をどのようにコンテナに合わせるかを指定します。`cover` は、アスペクト比を維持したまま、コンテナを完全に覆うように画像を拡大縮小します。

Q2: `overflow: hidden;` を使用しないとどうなりますか？

A2: `overflow: hidden;` を使用しないと、画像はコンテナからはみ出して表示されます。正方形にトリミングされず、レイアウトが崩れる可能性があります。

Q3: このテクニックはレスポンシブに対応していますか？

A3: はい、このテクニックはレスポンシブに対応しています。`width` プロパティにパーセンテージを指定することで、親要素の幅に合わせて正方形のサイズが自動的に調整されます。

その他の参考記事:CSS レイアウト - オーバーフロー