1

これには 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% に設定したいと考えています。ありがとう！

4

1 に答える 1

1

http://jsfiddle.net/f7RMA/

<div class="box">
  <img src="http://renboy.com/images/squareWeb.jpg">
  <div class="bar"></div>
</div>

CSS:

.box {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
}

.box img {
    display: block;
    width: 100%;
}

.box .bar {
    position: absolute;
    width: 100%;
    height: 10%;
    top: 85%;
}

WTF が発生: .box100% 幅に設定されます。中の画像も100%に設定。安っぽいブラウザの画像は、片側だけサイズを変更しても縦横比を維持します。.box画像全体が含まれている必要があるため、その高さは画像の高さに設定されます。は絶対配置されているため、高さが明確になっているため、 の内側に.box入れたり、縦方向に自由に配置したりできます。.bar.box.box

于 2012-07-15T16:57:40.103 に答える