記事タグCSS3object-fitプロパティは、画像などの要素をボックスにフィットさせる方法を指定します。CSS3におけるobject-fitプロパティの意味と使い方、値の指定方法、サンプルコード、使用例について解説します。}object-fitプロパティは、画像などの要素をボックスにフィットさせる方法を指定します。HTMLのimg要素、video要素、iframe要素など、置換要素に適用できます。fill要素の縦横比とサイズが調整され、ボックスを完全に埋めるように表示されます。contain要素の縦横比を保ったまま、ボックスに要素全体が収まるサイズに調整されて表示されます。要素の幅と高さのうち、長いほうだけがボックスにフィットします。cover要素の縦横比を保ったまま、ボックスを完全に埋めるサイズに調整されて表示されます。要素の幅と高さのうち、短いほうがボックスにフィットし、長いほうははみ出します。noneサイズは調整されず、そのまま表示されます。scale-downnoneまたはcontainを指定した場合の、要素が小さくなる方を適用します。ChromeShare記事をシェアするtweetpocketこの記事が気に入ったらいいね!しようできるネットから最新の記事をお届けします。ゆうこ)Webサイト制作を行うデジパ株式会社所属のマークアップエンジニア。HTML、CSSによるコーディング業務から、CMSの導入・カスタマイズまで、制作業務全般に携わる。「ディレクターからの指示がなくても、かゆいところに手が届くように」がモットー。よしき)フリーランスによるWebサイト制作業務などを経て、2004年よりWebサイト制作を行うデジパ株式会社に所属。クリエイティブ事業部マネージャー。個人活動としてセミナーでの講演、執筆も行う。