object-fit と object-position_html/css_WEB-ITnose

object-fit と object-position は、最近私が気に入っている CSS プロパティの 2 つです。これらにより、開発者は、background-position とbackground-size を使用して背景コンテンツを操作するのと同様に、画像またはビデオ内のコンテンツを操作できます。

まず、object-fit について詳しく見てみましょう。

この属性は、 img などの要素がそのコンテナの幅と高さにどのように適合するかを定義します。 object-fit を使用して、「このアスペクト比を保存する!」または「できるだけ多くのスペースを取るように拡大する!」など、さまざまな方法でコンテンツにコンテナーを埋めるように指示できます。

次のようなケースがあります。ポイント:

この画像のサイズは 400px x 260px です。画像をこのようにスタイルすると...

img {    width: 200px;  height: 300px;}

... 画像がコンテナに収まるように押しつぶされているため、歪んだ画像が作成されます。

img の高さと幅を変更すると、img の内容が作成したコンテナーの利用可能なスペースをすべて占有するため、以前に作成したアスペクト比が破壊されます。

スペースを埋めながら画像のアスペクト比を維持するには、object-fit を使用できます。

.cover {  object-fit: cover;}

左側が元の画像、右側が元の画像です。現在のアスペクト比を維持するために、元の画像は画像の側面が切り取られています。これは特別なことのように思えないかもしれませんが、一度スケーリング設計を始めると、object-fit の真の力が明らかになります。

別のケースを見てみましょう:

ここには 2 つの画像があり、それぞれがブラウザの幅の 50% を占めるようにします (並べて表示できるようにします)。高さは 100% です。ウィンドウ単位を使用できます:

img {  height: 100vh;  width: 50vw;}

問題は、ブラウザのサイズを変更すると、画像の縦横比が変わり、あらゆる種類の奇妙な現象が発生することです。代わりに、前に示したように常に同じ幅と高さの比率を維持したいと考えていますが、間違いなく同じアプローチを使用できます。 object-fit:cover は簡単に実装できます。

ブラウザのサイズをもう一度変更してみてください。アスペクト比のおかしなことは起こっていませんよね？これは、異なるサイズの画像がある場合にも、コンテナによって効果的に切り取られるため、非常に有益です。

cover は単なる object-fit プロパティの値です。詳細については「CSS3 Object-fit と Object-position」の記事で学ぶことができますが、これは私が見つけた最も一般的なものです。私の日々の発展の価値。

ターゲットを別の属性に移動します: object-position

前と同じ画像を使用し、次のスタイル設定を使用します:

img {    background: yellow;  height: 180px;  object-fit: none;}

2 つあります。ここで注意すべきこと: object-position が適切に機能するためには、画像サイズを宣言する必要があります。また、デフォルトで画像がコンテナ全体に表示されないように、object-fit を none に設定する必要があります。画像の object-fit プロパティは、宣言しなくてもデフォルトで塗りつぶされるため、これは理にかなっています。

デフォルト値について言えば、宣言されていない場合でも、object-position プロパティは水平方向と垂直方向に均等に分割されます。

img {  background: yellow;  height: 180px;  object-fit: none;  object-position: 50% 50%; /* even if we dont declare this the image will still be centered */}

最初の値は、画像が左右に移動することを意味します。 2 番目の値は上下の動きを表します。次の値を使用してデモンストレーションできます:

画像をコンテンツ ボックスに移動して、前に設定した背景色を簡単に表示することもできます。

でも何の役に立つのでしょう？ 良い質問です！最近のプロジェクトで、読者の注意を引くために画像を特定の領域の中心に移動する必要があることに気付きました。この場合、新しい画像をロードする必要がないため、 要素は必要ありません。画像を少し移動するだけです。

焦点位置に到達するために画像を移動すること以外に、このプロパティにどのような実際的な目的があるのか​​わかりません。ただし、このデモのように、画像の一部を非表示にし、クリックされた部分を表示する方法を示すために object-position を試してみました。

この属性を < に適用することは試していません。 video>要素はまだありません。全画面ビデオのすべての端をクリックするとよいでしょう。これらの機能に関しては、まだ発見すべきことがたくさんあります。

互換性の問題

一般的に言えば、互換性はかなり良好です。