オブジェクトフィットとオブジェクトポジションは、Webページの寫真やビデオの変形および不適切なトリミングの問題を解決できます。 1。オブジェクトフィットは充填方法を制御します。一般的な値には、塗りつぶし（ストレッチフィル）、內(nèi)容（プロパティの完全な表示を保持します）、カバー（比率のカバーコンテナを保持）、なし（オリジナルサイズ）、スケールダウン（動(dòng)的コンテンツに適しています）が含まれます。 2。オブジェクトポジション制御作物領(lǐng)域の位置を制御し、構(gòu)文は視覚的焦點(diǎn)を指定するために使用できる背景ポジションに似ています。 3.実際のアプリケーションには、モバイルアバターのトリミング、カードスタイルのレイアウト統(tǒng)一ディスプレイ、ビデオ埋め込み適応、およびその他のシナリオが含まれます。 4.ブラウザの互換性に注意し、さまざまな割合の寫真の効果をテストして、重要な部品がトリミングされていないことを確認(rèn)してください。これらの2つの屬性を習(xí)得すると、さまざまなコンテナのメディア要素のパフォーマンス制御が改善されます。

Webページで寫真やビデオを処理する際にレイアウト変形と不適切な作物の問題に遭遇した場合、 object-fitとobject-positionには役に立たない可能性があります。これらの2つのCSS屬性は目立たないように見えますが、異なるコンテナのメディア要素のパフォーマンス制御を大幅に改善できます。

オブジェクトフィット：メディアの入力方法を制御します

畫像を固定サイズの容器に入れると、畫像を伸ばしたり、誤ったりすることがあります。この時(shí)點(diǎn)でobject-fit役に立ちます。

一般的に使用されるいくつかの値があります。

• fill ：デフォルト値、スケールに関係なく、コンテナ全體を埋めると、変形する場合があります
• contain ：全體像が表示され、容器が白であることを確認(rèn)するには、スケーリングを拡大し続けてください
• cover ：容器全體が覆われ、畫像がトリミングされていることを確認(rèn)するために、スケーリングし続けてください
• none ：元のサイズ、ズームなし
• scale-down ： contain似ていますが、小さいものが優(yōu)先します（動(dòng)的なコンテンツに適しています）

たとえば、300x200 Divに水平畫像を置くと、 object-fit: cover中央に配置され、カバー畫像ディスプレイに適しています。 containを使用している間、全體像はボックスに完全に表示されます。これはアルバムプレビューシーンに適しています。

オブジェクトポジション：作物領(lǐng)域の位置を制御します

object-fit: coverまたはnone 、畫像はトリミングされる場合があります。それで、あなたはどこから敷設(shè)を開始するかを決めたいですか？これがobject-positionが行うことです。

その構(gòu)文は、次のようなバックグラウンドポジションに似ています。

• object-position: center; （デフォルト）
• object-position: top left;
• object-position: 50% 30%;
• object-position: 10px 20px;

常に顔を中心に表示したいキャラクターのクローズアップ寫真があり、コンテナスケールが変更されたとしても、頭が切り取られない場合でも、 object-fit: coverとobject-position: center topと一緒に使用できます。

このプロパティは、特に特定の視覚的焦點(diǎn)を強(qiáng)調(diào)する必要がある場合に、レスポンシブデザインで特に役立ちます。

実用的なアプリケーションの提案

実際の開発では、次のポイントは注目に値します。

• モバイルアバターのトリミング： cover positionを使用して、常に指定されたエリアにアップロードされた寫真を維持します。
• カードスタイルのレイアウト寫真の統(tǒng)一ディスプレイ：統(tǒng)一された幅と高さのコンテナとcoverを設(shè)定して、きちんとしたビジュアルを確保します。
• ビデオの埋め込み適応：寫真と同様に、ビデオタグはこれら2つの屬性を使用して再生領(lǐng)域を制御することもできます。
• ブラウザの互換性に注意してください：主流の最新のブラウザはそれをサポートしていますが、IEの古いバージョンはできません。

さらに、容器內(nèi)のさまざまな割合の畫像の効果をテストして、過度の空白または重要な部品がトリミングされないようにすることを忘れないでください。

基本的にそれだけです。 object-fitとobject-positionをマスターすると、さまざまなレイアウトでメディア要素のパフォーマンスをより柔軟に制御でき、コードも簡潔で明確です。

以上がメディアのCSSオブジェクトフィットとオブジェクトポジションのマスターの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。