CSS：オブジェクトフィット

CSSプロパティobject-fitは、要素をそのコンテナの幅と高さの範囲内にスケーリングします。背景画像は、このプロパティを使用する開発者として遭遇する最も一般的な要素です。

object-fitプロパティには5つの可能な値があります。さまざまな値を説明するための例として、画像を使用します。

• object-fit：contain – containsを使用すると、コンテナ（この場合は画像）に入る要素のアスペクト比が維持されます。比率が一致しない場合は、比率が一致しない側にバーが表示されます（ワイドスクリーンビデオがリリースされたとき、古いテレビでは画面の上下にバーが表示されます）。

• object-fit：cover – カバーは、コンテンツボックスを埋めている間、アスペクト比を維持します。アスペクト比が一致しない場合、画像は収まるようにクリップされます。

• object-fit：fill –この場合、元のアスペクト比が一致するかどうかに関係なく、画像は要素のコンテンツボックスを埋めるようにサイズ変更されます。これにより、画像が収まるように引き伸ばされる可能性があります。

• object-fit：none –画像は元のサイズを維持します。

• object-fit：scale-down –スケールダウンプロパティは、なしのいずれかを自動的に選択します または含む 、結果として全体の画像サイズが小さくなる方。この場合、スケールダウンは含むを選択します ：

このプロパティでは、ブラウザのサポートがかなり普及しています。古いInternetExplorer、Microsoft Edge、またはOperaブラウザ用に開発している場合は、サポートを再確認してください。

結論

この記事では、object-fitプロパティについて説明しました。挿入してコンテナを埋めることができる要素に使用されます。このプロパティは、またはその他の置換された要素で直接使用され、がコンテナをどのように満たすかを制御します。 object-fitプロパティをobject-positionプロパティと組み合わせて使用​​して、要素がコンテナ内でどのように表示されるかを制御します。