CSSでは、複数のオーバーレイされたイメージを応答してどのようにスケールするのですか？

Question

私は、背景の上にオーバーレイ複数の画像を持っているが、ここでの例です：

<div style="position: relative; left: 0; top: 0;"> 
    <img src="images/background.png" style="position: relative; top: 0px; left: 0px;"/> 
    <img src="images/overlay1.png" style="position: absolute; top: 20px; left: 20px; "/> 
    <img src="images/overlay2.png" style="position: absolute; top: 40px; left: 40px; "/> 
</div> 

ブラウザがフルスクリーンモードになっている場合は、上記のスニペットが動作します。ブラウザのサイズを小さくすると、それに応じてbackground.pngだけが拡大/縮小されますが、overlay1.pngとoverlay2.pngは同じサイズのまま固定されたままです。私はすべての位置属性をrelativeに変更しようとしましたが、オーバーレイ画像が間違った場所に表示されています。

divタグ内のすべての画像を互いに適切に拡大するにはどうすればよいでしょうか？ところで、私はデフォルトのCSSテーマとしてTwitter Bootstrap 2.3.2を使用しています。

詳細すべての画像は固定サイズです（例：背景は、位置0、0に示される640×480である。オーバーレイ画像もまた固定サイズであり、背景画像に関して特定の位置に移動する必要がある。例えばオーバーレイは64x64で、位置は15,24（上、左）、別の位置は128x128、位置は200,231などになります。これらの正確な位置の重ね合わせによって、背景とオーバーレイが完全な画像になります。

Answer 1

ブラウザウィンドウのサイズを変更する際にすべてを維持するために、オーバーレイのサイズと位置の両方にパーセンテージ値を使用する必要があります。あなたのケースでは

それはあなたが簡単な数式必要このため、割合にピクセルを変換するだけの問題ですので、すべてが固定されている：（64×64）の位置：オーバーレイ1サイズのために、例えば

% value = px value/container px value * 100 

を（24,15）：

.container { 
    position:relative; 
    width: 100%; 
    max-width: 640px; 
    line-height: 0; 
} 

.container img{ 
    max-width: 100%; 
} 

.overlay1{ 
    width: 10%; 
    position: absolute; 
    top: 3.125%; 
    left:3.75%; 
} 

.overlay2{ 
    width: 20%; 
    position: absolute; 
    top: 41.666%; 
    left: 36.09%; 
} 

：

width = 64/640*100 = 10% 
top = 15/480*100 = 3.125% 
left = 24/640*100 = 3.75% 

は今だけ、絶対位置と、各プロパティの正しい値を適用するようにオーバーレイを設定します0

をチェックアウトDemo fiddle