【CSS Modules】object-fitプロパティの使い方

object-fitプロパティは、埋め込み要素（<img>や<video>など）のコンテンツが、その要素のボックス内でどのようにサイズ調整されるかという振る舞いを設定する値を保持するプロパティです。このプロパティは、画像や動画といった埋め込みコンテンツのアスペクト比（縦横比）を維持しながら、指定された表示領域に適切に収めたり、領域を埋め尽くしたりする柔軟な表示制御を可能にします。Webサイトのレスポンシブデザインにおいて、多様な画面サイズでの表示崩れを防ぎ、レイアウトの一貫性を保つために不可欠であり、コンテンツの視覚的整合性を保ち、ユーザーに快適な閲覧体験を提供します。

主な値には、「fill」「contain」「cover」「none」「scale-down」があります。例えば、「contain」は縦横比を保ちつつ要素内に全体を収め、「cover」は縦横比を保ちつつ要素全体を埋め尽くし、はみ出す部分を切り取ります。これらの値を使い分けることで、Webページ上の埋め込みコンテンツの表示を効果的に管理し、視覚的な品質を高めることができます。

Copy
1object-fit: fill | contain | cover | none | scale-down;

引数なし

引数はありません

戻り値なし

戻り値はありません