object-fit: 画像を中心に配置する便利なメソッド_html/css_WEB-ITnose

今日、プロジェクトで画像が中央に配置されるという問題に遭遇しました。この問題の解決方法については以前にも記事を書きましたが、方法はいくつかあります。しかし、今日は新しいソリューションである object-fit について話します。これは非常に便利なソリューションです。

最初にプレビューをご覧ください:

詳細なデモを表示

object-fit は「置換された要素」にのみ使用できます。いわゆる置換可能な要素とは、コンテンツとパフォーマンスが CSS によって制御されず、独立してレンダリングされる外部要素を指します。例: img、object、video、および textarea、input、audio、canvas などのフォーム要素。一部の特殊な場合があります。 、交換可能な要素としても使用できます。

object-fit を使用するときは、必ず要素のサイズ、つまり幅と高さを設定してください

早速本題に入りますが、object-fit には 5 つのオプションの値があります。つまり、

• fill デフォルト値です。パディング、つまり置換可能な要素がコンテンツ領域全体を埋め、アスペクト比を変更する可能性があります。
• contains は、アスペクト比を維持し、置換可能な要素が完全に表示されるようにします。アスペクト比がコンテンツ領域のアスペクト比と一致しない場合、コンテンツ領域は空白になります。
• カバーはカバーし、アスペクト比を維持し、コンテンツ領域を確実に埋めるため、置換可能な要素が部分的に切り取られ、完全に表示できない場合があります。
• none 名前が示すように、これには何も意味がありません。もちろん何もないわけではありません。fill と同じであるとは思わないでください。実際の効果は、交換可能な要素の元のサイズと比率が維持されることです。
• スケールダウンスケールダウン。効果は「含む」または「なし」に似ています

使い方も非常に簡単です:

.cover{    object-fit: cover;}.contain{    object-fit: contain;}.fill{    object-fit: fill;}.scale-down{    object-fit: scale-down;}

もう 1 つ

object-position

要素が object-fit によって切り取られるとき、切り抜きを制御する方法を知りたいはずです。位置。 名前が示すように、object-position はこの問題を解決するように設計されています。

ただし、object-position は理解するのが難しいわけではなく、background-position と似ているので、これ以上は説明しません。

ブラウザの互換性

• IE は、最新の EDGE を含むファミリー全体ではサポートされていません
• android 4.4.4 以降はサポート、Chrome 29 以降はサポートします
• Safari 7.1 以降および iOS 8 以降は object-fit をサポートしますが、サポートされていませんsupport object-position

囧~~、書き終えた後、偉大なる神、張新胥が以前に記事を書いていたことを発見しました。 。 。