CSSの`object-fit`は、画像や動画などの要素を親要素に合わせてリサイズする際に、どのように表示するかを指定するプロパティです。 `object-fit`を使用することで、画像や動画のアスペクト比を保ったまま、親要素に合わせてリサイズすることができます。 - `fill`：親要素に合わせてリサイズし、アスペクト比を無視して要素を伸縮させます。 - `contain`：親要素に合わせてリサイズし、アスペクト比を保ったまま、親要素に収まるように要素を縮小します。 - `cover`：親要素に合わせてリサイズし、アスペクト比を保ったまま、親要素にピッタリと合うように要素を拡大します。 - `none`：親要素に合わせてリサイズせず、要素のサイズをそのまま表示します。 - `scale-down`：親要素に合わせてリサイズし、アスペクト比を保ったまま、親要素に収まるように要素を縮小します。ただし、要素が縮小される場合は`contain`と同じ挙動になります。 ## 例1: 画像のリサイズ画像を親要素に合わせてリサイズする場合に、`object-fit`を使用することができます。以下の例では、img要素に`object-fit: cover`を指定することで、画像を親要素にピッタリと合わせて表示しています。 ```html-preview

``` この例では、親要素の幅が300px、高さが200pxである`.container`要素に対して、img要素を100%でリサイズしています。また、img要素には`object-fit: cover`を指定しているため、画像が親要素にピッタリと合うように拡大されて表示されます。 ## 例2: 動画のリサイズ動画を親要素に合わせてリサイズする場合にも、`object-fit`を使用することができます。以下の例では、video要素に`object-fit: contain`を指定することで、動画を親要素に収まるように縮小して表示しています。 ```html-preview

``` この例では、親要素の幅が300px、高さが200pxである`.container`要素に対して、video要素を100%でリサイズしています。また、video要素には`object-fit: contain`を指定しているため、動画が親要素に収まるように縮小されて表示されます。

スキル図鑑

.css-x7cx95{padding:var(--chakra-space-2);}@media screen and (min-width: 600px){.css-x7cx95{padding:0px;}}object-fit

クイズにチャレンジしよう！

object-fit