tailwind でobject-containを指定しても、縮小されずにはみだしてしまう場合。

<img>タグのサイズを固定していない可能性があります。

特にh-12やw-fullなどのクラス名を指定していない場合、その可能性が高いため、ここは来るべき場所です。おめでとう。

画像のサイズに影響されないようにする

“サイズを固定する"というのは、<img>のサイズが画像の大きさに左右されないようにするということです。

特に何も設定していない場合、画像の大きさが 100x200px であれば、当然<img>のサイズも 100x200px になります。

これではobject-containを設定しても無意味です。

h-12 w-12のような固定サイズを指定しましょう。 親要素が固定サイズである場合、h-full w-fullなどとして間接的に固定サイズにすることもできます。

親が固定サイズでも安心できない

<div className="h-12 w-12">
  <img className="object-contain" src="https://example.com" />
</div>

このような場合、確かに親要素が固定サイズなので、画像はそのサイズで表示されますが、 object-containは効かずに、はみだした画像の右下部分が省略されることになります。

それを解消するためには

<div className="h-12 w-12">
  <img className="h-full w-full object-contain" src="https://example.com" />
</div>

のようにして、<img>本体を固定サイズにする必要があります。