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