これには Javascript が必要になると思いますが、私が知らない CSS のトリックがあるかもしれません。
正方形の背景画像に基づく Web ページがあります。理想的には、ユーザーは常にブラウザーを正方形に設定しますが、それが起こらないことはわかっています。
画像は正方形であるため、画像がブラウザ全体に 100% 表示されるように設定されている場合、幅はページの「下部」の位置と常に同じになります。
したがって、要素を動的に水平方向に配置するには (ページのサイズを変更しても構造を維持できるようにするため)、要素の上部の位置は幅のパーセンテージになります。
つまり、常に画像の上部から 85% の位置に配置する必要がある水平バーがある場合、上部の位置は幅の 85% として定義できます (上部: [ブラウザー幅の 85%])。水平バーの上部を単純に 85% (top:85%;) と定義した場合、水平バーの位置はブラウザー ウィンドウの高さによって異なります (一方、幅の 85% に設定した場合は正確になります)。欲しいところ)。
前に述べたように、これは Javascript で行うのはおそらく簡単なことですが、私は Javascript を知りません。幅のパーセンテージを計算して配置できるようにする関数がCSSにないと思いますが、それは理想的です。
どんな助けでも大歓迎です!前もって感謝します。
======================================
(出典: renboy.com )
残念ながら、私は新しいユーザーであり、インターフェイスで写真を投稿できません。
ページは正方形です (大きな正方形の画像)。上部が画像の上部から 85% の位置にある水平ナビゲーション バーがあります (ブラウザが画像とまったく同じサイズと寸法 (正方形) で開かれた場合、(top:85%;) と定義されます) .
ただし、誰かがブラウザーの下部を下にドラッグすると (背の高い長方形を作成するため)、85% は画像上の必要な場所にはなりません。ただし、幅の 85% は常に正確な位置にあります (画像は常に幅の 100% を占めるため)。したがって、水平位置を (高さではなく) ブラウザーの幅の 85% として定義できれば、ブラウザーが開いているサイズに関係なく、ナビゲーション バーは正確に必要な場所に表示されます。可能な解決策を事前に感謝します。
================== さらに調査を行うと、答えは Jquery にあるように思われます (位置またはおそらく outerWidth またはおそらく var winWidth = $(window) のようなものを使用)。 width();) ですが、Java/Javascript の経験はありません。そこに何か助けはありますか?ここでも、水平ナビゲーション バーを保持する div の位置を、ブラウザー ウィンドウの幅の 85% に設定したいと考えています。ありがとう!