こんにちは。
野中やすおです。
タイトルの通りですが、Tailwind CSSでもCSSの「Object Fit」が使えることを最近知ったので、備忘録として残しておきます。
Obeject Fitとは
CSSの「Object Fit」とは、imgといった画像要素やvideoといったビデオ要素を要素のボックスに合わせて、よしなに配置を調整してくれます。
MDNのWeb Docsに詳しい使い方例が書かれていますが、ボックスに合わせて画像の大きさを調整してくれるのは本当にありがたいです。
Taiwind CSSでも同じことができる
Tailwind CSSでも同様にObject Fitがが用意されています。classにobject fitを追加することで表現することができます。
object-contain
置換対象のコンテンツは、オブジェクト全体がボックス内にアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大・縮小されます。
|
1 2 3 |
<div class="example"> <img class="object-contain h-2 w-4 ..."> </div> |
object-cover
置換対象のコンテンツは、オブジェクト全体がボックス内にアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大・縮小されます。ただし、オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が、ボックスに合わせて切り取られます。
|
1 2 3 |
<div class="example"> <img class="object-cover h-2 w-4 ..."> </div> |
object-fill
置換対象のコンテンツは、要素のコンテンボックスを埋めるサイズになります。オブジェクトはボックスのサイズに合うように引き伸ばされます。
|
1 2 3 |
<div class="example"> <img class="object-fill h-2 w-4 ..."> </div> |
object-none
置換対象のコンテンツは、拡大・縮小されず、そのままのサイズで表示されます。
|
1 2 3 |
<div class="example"> <img class="object-none h-2 w-4 ..."> </div> |
object-scale-down
置換対象のコンテンツは、元のサイズを維持しながら縮小されて表示されます。noneとcontainを合わせたようなもので、オブジェクトの実際のサイズが小さいほうを採用します。
|
1 2 3 |
<div class="example"> <img class="object-scale-down h-2 w-4 ..."> </div> |
参考
- Object Fit
Utilities for controlling how a replaced element's content s…
