CSSの数式 Contain&Cover_html/css_WEB-ITnose

誰もが背景サイズの contains と cover の使用方法を理解する必要があります。しかし、そこには興味深い数学的関係もいくつかあります。

基本概念

上記は、rimage (画像のアスペクト比) と rviewport (コンテナのアスペクト比) の定義です。

画像をコンテナに入れる

3つの方法

• stretch: 画像の幅と高さをコンテナの幅と高さに強制的に設定します

注: h'image 、w'image、r'imageは変更後の画像の高さ、幅、アスペクト比です。以降の記事でもこれらの名詞は同じ意味を持ちますので、説明は省略します。

それでは、画像がコンテナに配置された後に変形しないようにするには、どのような数学的関係を維持できるでしょうか?
答えも明らかです:

r'image =rimage

次に紹介する 2 つの方法は変形しません。つまり、上記の式は既知の条件であることを意味します。

• contain : 画像をコンテナーに収まるように、空白のスペースも残しながら画像をコンテナーに「詰め込み」ます。映画を見るときの「ブラックエッジ」と同じです。

  contain メソッドの場合、コンテナに配置された後の画像の高さ (h'image) のみが不明です。計算してみましょう:

contains がなぜこのようになるのかわからない場合は、まずはご覧ください。background-size

• cover: 画像でコンテナを「覆う」こともできます。

  はcontainに対応しており、coverメソッドはw'imageを計算する必要があります

アスペクト比の影響

お気づきかどうかわかりませんが、containとh'imageを導出したとき先ほどのカバーの w'image 使用される画像のアスペクト比は、常にコンテナーのアスペクト比よりも大きくなります。

これは何につながりましたか?そのため、導出に使用した条件 3 は正しくない可能性があります。
ええと、それを言うと少しめまいがします。写真を見てください:

ご覧のとおり、ここではrimage > rviewportの状況のみを考慮しました。

結論

rimage < rviewport を考慮して、コンテナに配置された後の画像の幅と高さは次のとおりです。

このようにして、背景サイズ属性 ,high を適用した後のコンテナ内の画像。

非表示の比例関係

次に、画像をコンテナに配置した後の画像とコンテナの間の非表示の比例関係について説明します。これにより、この関係を使用して、コンテナの変更に応じて画像も変更できるようになります。
hidden は 1 未満の比率であることに注意してください。このように設定する理由は後で説明します。

包含レイアウトを例として取り上げます。rimage > rviewport:

そしてカバー レイアウトを例として取り上げます。

このようにして 4 つの可能性がわかりますが、上記の w'image と h'image を導出したことを忘れないでください。

したがって、hidden の最終結果は次のようになります:

hidden の結果は 2 つだけ、

rimage / rviewport

または

r viewport /rimage

だけであり、この数値は 1 未満であることがわかります (これは上記により決定されます）。

つまり、hidden の計算は次のように簡略化できます:

追記

長い間取り組んできた後、どうすればこれができるのかと考えているかもしれません。なぜ特定の幅と高さを取得する必要があるのでしょうか?

私も思ったのですが、写真だけだと、全部ナンセンスな気がします。しかし、それが DOM だったらどうなるでしょうか?これは単なるレイアウト方法ですか？

分からないけど、知識ってこういうこともあるのね。必要な場合にのみ便利です。

参考記事

CSS ? Contain & Cover

==========

ブログの購読を歓迎 =_=

=========