CSSオブジェクトフィットとオブジェクトポジションの使用方法

コアポイント

• cssプロパティobject-fitおよびobject-positionを使用して、背景画像のCSSプロパティbackground-sizeおよびbackground-positionと同様に、埋め込み画像やその他の交換要素をサイズ変更して配置できます。
• object-fit属性は、指定された領域で画像の表示方法を制御するためのさまざまなオプションを提供し、必要に応じて画像の一部を非表示にすることができます。これは、歪みのない特定の空間に画像を適応させるのに役立ちます。
• object-fit属性には、cover、contain、none、scale-down、fill、
の5つの主要なキーワード値があります。これらの値は、画像が容器内に表示される方法を決定し、領域をカバーし、領域に適応し、自然なサイズを維持し、フィットするか、コンテンツボックスを埋めることができます。
• object-position50% 50%属性は、コンテンツボックス内の画像要素の位置を制御します。そのデフォルト値は
です。これは、画像センターをコンテンツボックスセンターと並べますが、一連のキーワード値または長さの値を使用して調整できます。
• object-fitobject-positionおよび
は、あらゆる種類の交換要素を処理するように設計されていますが、最も一般的には、歪みのない特定のスペースに画像を適応させるために最も一般的に使用されます。それらはすべての最新のブラウザでサポートされていますが、インターネットエクスプローラーではサポートされていません。

background-sizecssは、background-positionおよびobject-fitプロパティを提供して、背景画像をサイズ変更して配置します。 object-positionおよびobject-fitプロパティにより、埋め込まれた画像（およびビデオなどの他の交換要素）で同様の操作を実行できます。この記事では、object-positionを使用して画像を特定のスペースに適合させる方法と、その空間内の画像の位置を正確に制御する方法を使用して、特定のスペースにフィットする方法に飛び込みます。

object-fitの用途 時々、画像が大きすぎて、必要なスペースに合わせることができない場合があります。過去には、画像エディタで画像をトリミングするか、幅や高さの制約を設定して画像をサイズ変更するか（これは完璧な選択ではありません）、ある種の複雑なトリミングを実行するか、背景画像を使用することに頼る必要がありました（または、背景画像の使用に頼る必要がありました（画像が装飾だけではない場合、これは残念です）。

の関数に似ています。指定された領域で画像が表示される方法を制御するためのさまざまなオプションを提供し、その一部を隠すことができます必要に応じて画像の内容。この指定された領域には固定された幅と高さがある場合があります。または、ブラウザビューポートのサイズに応じて成長、縮小、曲げたメッシュ領域など、より応答性の高いスペースである場合があります。 object-fit 働き方background-size

画像に異なる幅や高さを適用すると、実際にコンテンツボックスのサイズが変更されています。コンテンツボックスのサイズが変更された場合、画像はコンテンツボックスに入力されます。したがって、300px x 300pxの画像があり、そのサイズを300px x 200pxに設定すると、画像が変形します。

object-fitプロパティは、サイズ変更されたコンテンツボックスに画像を表示するためのさまざまなオプションを提供します。画像の一部を非表示にするか、画像が完全に表示され、変形しないように、画像にコンテンツボックスを部分的にのみ満たすように強制することができます。

設定

object-fitプロパティがどのように機能するかを詳細に説明するために、グリッドレイアウトを使用して中心にあるDivに画像を配置します。 divには茶色の背景があり、点線の境界線は::before オブジェクトフィット：セットアップ

画像のデモンストレーションには、次の画像（OIA、サントリーニ、ギリシャ）を使用します。その自然な寸法は400px x 600pxです。

私たちの画像は私たちのdivよりもはるかに大きく、divの内側に画像を配置すると、以下に示すようにオーバーフローします。

私たちの目標は、容器に快適に取り付けられながら、画像がこのようなコンテナを溢れさせないようにすることです。

に似たものを設定でき、背景画像はコンテナの領域に限定されます。ただし、ご覧のとおり、object-fitが機能するためには、最初に画像コンテンツボックスの幅と高さを定義して、自然な寸法とは異なるようにする必要があります。次の例では、画像の幅と高さを100％に制限して、コンテンツボックスがコンテナdivのサイズと一致するようにします。

これがどのように見えるかです。 background-size: cover object-fitオブジェクトフィット：setup3

img {
  width: 100%;
  height: 100%;
}

画像とそのコンテンツボックスは、コンテナに完全に適合するようになりましたが、画像は大幅に変形しています。これは、

object-fit

object-fit属性は、5つの主要なキーワード値を提供して、そのコンテナ内に画像が表示される方法を決定します。 2つのキーワード - coverおよびcontain - は、background-sizeと同じ関数を実行します。

object-fit: cover

cover値は画像にコンテナ領域を完全にカバーするように強制し、歪みなしでできるだけ多くの画像を表示します。

img {
  width: 100%;
  height: 100%;
}