【CSS】 「画像」を親要素にフィットさせつつ「中央」に配置したい

こんにちは、さち です。

先日、「画像」を「親要素」からはみ出さないようにフィットさせつつ、上下左右（縦横）の「中央」に配置したいことがありました。

HTML と CSS をどうすればいいか地味に苦労したので、備忘録としてこの記事にまとめておきます。

【方法1】 「max-width」「max-height」を使う

サンプルコード

<div>
  <img src="horizonal-arrow.png" />
</div>

<div>
  <img src="vertical-arrow.png" />
</div>

div {
  width: 130px;
  height: 130px;
  border: 2px solid brown;

  /* img を中央に配置 */
  display: grid;
  place-items: center;
}

img {
  max-width: 100%;
  max-height: 100%;
}

結果

<img> 要素を中央に配置するために、今回は display: grid; と place-items: center; を使いましたが、他にも方法はあります。下記リンク先の記事で紹介しているので、併せて参照してみて下さい。

【CSS】 要素を「上下左右（縦横）」の中央に配置する6つの方法

こんにちは、さち です。サイトを作っているとブチ当たるのが、テキストや画像などの要素を「上下左右（縦横）」の中央に配置するには HTML・CSS をどう書けばいいのか問題。左右中央は text-align: center; でだいたい間に合

at.sachi-web.com

2023.07.17

【方法2】 「object-fit」を使う

サンプルコード

<div>
  <img src="horizonal-arrow.png" />
</div>

<div>
  <img src="vertical-arrow.png" />
</div>

div {
  width: 130px;
  height: 130px;
  border: 2px solid brown;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

結果

その他の「値」の効果

プロパティ object-fit に使用できる値は contain 以外にもあります。詳しくは下の表のとおりです。何かと役立つので活用してみて下さい。