株式会社オンズ 開発ブログ 【CSS3】親要素の大きさに依存して画像の表示方法を変える[object-fit]プロパティの使い方。 CSS3から新たに使えるようになった「object-fit」プロパティについて解説します。 聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。 ……文章の説明だけでは理解しにくいと思うので、実際に「object-fit」を使ったサンプルをご覧ください。 object-fit:サンプル・デモ ※サンプルは、Safari、Google Chrome、Firefox等のモダンブラウザでご確認ください。 親要素のボックスの表示領域に依存して、画像の大きさが変更されているのをご確認できると思います。 このプロパティ[object-fit]で指定できる値は5つ。 object-fit: f
![【CSS3】親要素の大きさに依存して画像の表示方法を変える[object-fit]プロパティの使い方。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1bf8575a55478b4a3fa8920a1782be04e3b1d672/height=288;version=1;width=512/https%3A%2F%2Fon-ze.com%2Fblog%2Fwordpress%2Fwp-content%2Fthemes%2Fonze-blog-2024%2Finc%2Fthumbnail%2F1200x630x80-e89e5b89f66066a52fd10cd7fd7edddb-badge_css3.png)