CSSで画像の縦横比(アスペクト比)やサイズを自動調整する(object-fitの使い方)

object_fit

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、CSSで画像の縦横比(アスペクト比)やサイズを自動調整する(object-fitの使い方)について解説します。

CSSで画像の縦横比(アスペクト比)やサイズを自動調整する(object-fitの使い方)

CSSのobject-fitプロパティには、以下の5つの種類があります。

  1. fill: 親要素に合わせて、コンテンツのアスペクト比を無視してリサイズされます。
    • つまり、コンテンツが親要素にピッタリとフィットするように拡大または縮小されます。
    • なので、縦横比(アスペクト比)が崩れるデメリットがあります!
  2. cover: 親要素に合わせて、コンテンツが完全に表示されるように調整されます。
    • つまり、コンテンツが親要素にピッタリと合わせられ、余白が空くことはありません。
    • 必要に応じて、コンテンツが切り取られる場合があります。
    • 「縦横比を守る!はみ出る部分は、トリミング(切り取る)!」って感じです。
  3. contain: 縦横比を保持し、ボックスに収まるようにリサイズされます。
    • 幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。
  4. scale-down: contain と cover のうち、小さい方のサイズに合わせて表示します。
  5. none: リサイズせず、そのまま表示します。

これらの種類は、親要素に合わせてコンテンツを調整する方法を指定するために使用されます。

object-fitのSampleCodeと実行イメージ

それでは、実際にSampleCodeと、その実行イメージを見ていきます。

次のSampleCodeを実行すると、次のようなHTMLが表示されます。

object-fit を使用した際のIcon画像の表示の違いがわかります。


<style>
.icon-fill {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
  /* 
    fill: 親要素に合わせて、コンテンツのアスペクト比を無視してリサイズされます。
    つまり、コンテンツが親要素にピッタリとフィットするように拡大または縮小されます。
    なので、縦横比(アスペクト比)が崩れるデメリットがあります!
  */
  object-fit: fill;
}
.icon-cover {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
  /* 
    cover: 親要素に合わせて、コンテンツが完全に表示されるように調整されます。
    つまり、コンテンツが親要素にピッタリと合わせられ、余白が空くことはありません。
    必要に応じて、ボックスからはみ出した部分はトリミングされます。

    縦横比を守る!はみ出る部分は、トリミング!
  */
  object-fit: cover;
}
.icon-contain {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
  /* 
    contain: 縦横比を保持し、ボックスに収まるようにリサイズされます。
    幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。
  */
  object-fit: contain;
}
.icon-scale-down {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
  /* 
    scale-down: contain と cover のうち、小さい方のサイズに合わせて表示します。
  */
  object-fit: scale-down;
}
.container {
  display: flex;
}
.card {
  margin: 0 25px;
  text-align: center;
}
</style>

<div class="container">
  <div class="card">
    <p class="" >object-fit: fill;</p>
    <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg" 
      alt="ロボ玉" class="icon-fill" style="border-radius: 50%;">
  </div>
  
  <div class="card">
    <p>object-fit: cover;</p>
    <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg"
      alt="ロボ玉" class="icon-cover" style="border-radius: 50%;">
  </div>
  
  <div class="card">
    <p>object-fit: contain;</p>
    <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg" 
      alt="ロボ玉" class="icon-contain" style="border-radius: 50%;">
  </div>
  
  <div class="card">
    <p>object-fit: scale-down;</p>
    <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg" 
      alt="ロボ玉" class="icon-scale-down" style="border-radius: 50%;">
  </div>
</div>

おすすめ書籍(HTML&CSS編)

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース(無料)

【IT道場】入校時0円! 就職目的プログラミングスクール

エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿