CSSオブジェクトフィットとオブジェクトポジションを使用して、画像の表示方法を制御するにはどうすればよいですか？

CSSオブジェクトフィットとオブジェクトポジションを使用して、画像の表示方法を制御するにはどうすればよいですか？

CSSはobject-fitおよびobject-positionプロパティを提供して、含有ボックス内に画像やその他の交換された要素（ビデオなど）がどのように表示されるかを制御します。これらのプロパティは、画像の寸法がコンテナの寸法と一致しない場合に特に役立ちます。

• オブジェクトフィット：このプロパティは、交換された要素のコンテンツをそのコンテナに合わせてサイズ変更する方法を指定します。コンテンツのアスペクト比とスケーリングを制御します。
• オブジェクトポジション：このプロパティはobject-fitプロパティに従ってサイズ変更された後、コンテナ内の交換された要素のコンテンツのアラインメントを決定します。

これらのプロパティを使用するには、画像要素をターゲットにするCSSルールにそれらを適用するだけです。これが例です：

 <code class="css">img { width: 300px; height: 200px; object-fit: cover; object-position: center; }</code>

この例では、アスペクト比（ object-fit: cover ）を維持しながら、300x200ピクセルボックスに収まるように画像がサイズ変更されます。画像コンテンツは、このボックス（ object-position: center ）内に中央に配置されます。

オブジェクトフィットの異なる値は何ですか？それらは画像表示にどのように影響しますか？

object-fitプロパティはいくつかの値を取ることができ、それぞれがそのコンテナ内に画像の表示方法に影響を与えることができます。

• Fill ：これはデフォルト値です。画像は、コンテンツボックスを埋めるために伸びており、アスペクト比を歪める可能性があります。
• 内容：画像は、コンテンツボックスにフィットしながらアスペクト比を維持するためにスケーリングされています。これは、アスペクト比がコンテナのアスペクト比と異なる場合、画像がボックス全体を埋めないことを意味します。
• カバー：画像は、コンテンツボックス全体を埋めながらアスペクト比を維持するためにスケーリングされています。これにより、アスペクト比が一致しない場合、画像がトリミングされる可能性があります。
• なし：画像はまったくサイズ変更されておらず、本質的なサイズで表示されます。画像がコンテナよりも大きい場合、オーバーフローします。
• スケールダウン：画像のサイズは、concreteオブジェクトサイズが小さい場合は、 noneが指定されていないか、 containているかのどちらかです。

これらの各値は、設計のニーズに応じて、画像の表示方法を管理する異なる方法を提供します。

オブジェクトポジションを使用して、コンテナ内の画像を調整できますか？

はい、 object-position使用して、 object-fitでサイズ変更された後、コンテナ内の画像を整列できます。 object-positionプロパティは、画像を配置するためのxおよびy座標を指定する1つまたは2つの値を取得します。

object-positionの構文はbackground-positionプロパティに似ています。これがあなたがそれをどのように使用するかの例をいくつか紹介します：

• 画像を中央に配置する：

   <code class="css">img { object-position: center; }</code>

• 画像を右上に配置するには：

   <code class="css">img { object-position: right top; }</code>

• 正確な座標で画像を配置するには：

   <code class="css">img { object-position: 20% 50%; }</code>

これにより、コンテナ内の画像の正確な配置を細かく制御できます。特に、 object-fit: coverまたはcontain画像サイズを管理する場合に役立ちます。

オブジェクトフィットを使用して画像がアスペクト比を維持することを確認するにはどうすればよいですか？

画像がアスペクト比を維持することを確認するには、オブジェクトフィットプロパティcontain 、 cover 、 none 、またはscale-down値を含むobject-fitプロパティを使用する必要があります。それぞれがアスペクト比を維持するのに役立つ方法は次のとおりです。

• 含まれる：これにより、画像を最大サイズにスケーリングして、幅と高さの両方がコンテンツボックス内に収まるようにします。画像のアスペクト比は保持されており、ボックス全体を埋めない場合があります。
• カバー：これにより、画像を最小サイズにスケーリングして、その幅と高さの両方がコンテンツボックスを完全にカバーできるようにします。画像のアスペクト比は保持されますが、画像の一部はトリミングされる場合があります。
• なし：画像は本質的なサイズで表示されます。サイズは変更されないため、元のアスペクト比を維持します。
• スケールダウン：これは、どちらかがnone 、 containのように動作し、サイズが小さくなります。アスペクト比が維持され、コンテナ内に収まる画像のサイズを潜在的に縮小することも保証されます。

fillを除くこれらの値のいずれかを使用すると、コンテナの取り付けまたは充填中に画像がアスペクト比を維持することを保証します。

以上がCSSオブジェクトフィットとオブジェクトポジションを使用して、画像の表示方法を制御するにはどうすればよいですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。