4

イントロページには、すべての解像度（幅4000px以上）に合うように高さと幅が非常に大きい画像があり、次のように設定しています。

#source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

次に、次のスタイルプロパティを使用して、その画像にテキストを追加しました。

.description {
    position:absolute;
    top:510px;  
    left:23px;
    width:340px
}

そしてそれは1366x768の解像度の私の15.6インチのラップトップで正しく（そして私がそれを見せたいように）見えます。

ここに画像の説明を入力してください

しかし、私のルームメイトが彼の高解像度モニターでそれを見たとき、説明は「正しい」位置にありませんでした。もちろん、なぜこれが起こっているのか理解しています。

ここに画像の説明を入力してください

私の質問は、すべての解像度で説明テキストの適切な位置を動的に維持するにはどうすればよいですか？どうもありがとうございます。

4

3 に答える 3

3

上からではなく、下からの距離を設定します。または、％で設定します。

編集：実験の1つを例に適合させました：http ：//dabblet.com/gist/2787061 説明の位置は、画像コンテナのbottomとを基準にして設定されleftます（画像はコンテナ全体を埋めています） 。

left最初のケースでは、画像コンテナのとまでの距離bottomはピクセル単位で固定されています。

2番目のケースでは、それらは％単位であり、ブラウザウィンドウのサイズ変更時に変更されます。

基本的に、トリックを行うルールは次のとおりです。

figcaption {
    bottom: 5px;
    left: 23px;
        /* more rules here */
}

最初のケース（固定距離、ピクセル単位）および

figcaption.perc {
    left: 10%;
    bottom: 17%;
}

2番目のケース（パーセンテージ）。

また、画像のとプロパティposition: absoluteを設定する必要はないことに注意してください。ただし、説明ボックスの親に設定する必要があります。topleftposition:relative

画像を画面全体に水平に表示するには、body要素とfigure要素にmargin:0;とが必要です。これらの変更を反映するように例を編集しましたhttp://dabblet.com/gist/2787061padding:0;width: 100%;margin: 0;

画像を水平方向と垂直方向の両方で画面全体に表示するには、imgタグを使用せずに、画像を本文の背景画像として設定し、HTML要素と本文要素の両方の高さを100に設定するのが最も簡単な方法です。 ％-例http://dabblet.com/gist/2792929

2つの理由に注意してください。1つは画像を実際に歪ませ、ブラウザウィンドウのサイズを変更するときに見栄えが悪くなる可能性があること、2つは画像の下にコンテンツが必要な場合は、外側の要素position: absoluteを指定してそのを設定する必要があることtop: 100%です。これらの2つの側面は、私がリンクした例で見ることができます。不要な場合は、画像の下のコンテンツを削除するだけです。

于 2012-05-25T09:47:27.417 に答える
1

position:relative;画像をラップするdivとposition:absolute;テキストdivに使用します

于 2012-05-25T09:47:14.947 に答える
0

パーセンテージを設定してください

横中央に設定されている例説明ボックスをチェックし、

ラッパーdivに相対的な最初の設定位置

.description {
    position:absolute;
    top:510px;  
    left:50%;
    width:340px;
    margin:0 0 0 -170px
}
于 2012-05-25T09:53:02.427 に答える