Der Inhalt von Div wird nicht skaliert, wenn Div geändert wird, um an die Browsergröße angepasst zu werden?

Question

Ich habe ein Div mit einem Bild in Pixel mit Inhalt definiert. Ich versuche, den secondContainer direkt in das "Loch" des ersten Bildes einzupassen.

#container { 
 
    position: relative; 
 
    height: 450px; 
 
    width: 450px; 
 
    border: 1px solid green; 
 
    background-repeat: no-repeat; 
 
    z-index: 0; 
 
} 
 
#backgroundImage { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
    z-index: 1; 
 
    background-size: contain; 
 
    background-image: url(http://thumb7.shutterstock.com/display_pic_with_logo/149584/149584,1206824658,1/stock-photo-old-japanese-coin-with-a-square-hole-isolated-on-white-10899223.jpg); 
 
} 
 
#secondContainer { 
 
    position: absolute; 
 
    height: 150px; 
 
    width: 150px; 
 
    transform: translate(150px, 140px) scale(0.6); 
 
    border: 1px solid red; 
 
    z-index: 2; 
 
} 
 
#image { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    box-shadow: 5px 0px 10px -5px black; 
 
    background-image: url(http://petnet-wp.s3.amazonaws.com/wp-content/uploads/2015/09/feeding_your_cat_a_healthy_diet_can_help_prevent_illness.jpg); 
 
}

<div id="container"> 
 
    <div id="backgroundImage"></div> 
 
    <div id="secondContainer"> 
 
    <img id="image"> 
 
    </div> 
 
</div> 
 
<style>

Es passt perfekt, aber wenn ich es

#container{ 
    position: relative; 
    height: 100%; 
    width: 100%; 
    ... 
} 

so ändern, dass sie erstreckt sich das Browserfenster passt, bleibt der zweite Behälter, wo sie ist, und der erste Behälter erstreckt sich. Ich möchte den zweiten Container genau in diese Position bringen. Wie könnte ich den Anteil halten?

Answer 1

Sie müssen Ihre Einheiten in % halten, versuchen Sie es mit der height and width. Sehen Sie sich diese Schnipsel:

body,html {margin:0;height:100%;} 
 
#container { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 1px solid green; 
 
    background-repeat: no-repeat; 
 
    z-index: 0; 
 
    box-sizing:border-box; 
 
} 
 
#backgroundImage { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
    z-index: 1; 
 
    background-size: contain; 
 
    background-image: url(http://thumb7.shutterstock.com/display_pic_with_logo/149584/149584,1206824658,1/stock-photo-old-japanese-coin-with-a-square-hole-isolated-on-white-10899223.jpg); 
 
    background-position:center; 
 
} 
 
#secondContainer { 
 
    position: absolute; 
 
    width: 20%; 
 
    height:14%; 
 
    left:50%; 
 
    top:48%; 
 
    transform: translate(-50%, -50%); 
 
    border: 1px solid red; 
 
    z-index: 2; 
 
    background:url('http://petnet-wp.s3.amazonaws.com/wp-content/uploads/2015/09/feeding_your_cat_a_healthy_diet_can_help_prevent_illness.jpg') no-repeat center; 
 
    background-size:contain; 
 
}

<div id="container"> 
 
    <div id="backgroundImage"></div> 
 
    <div id="secondContainer"></div> 
 
</div>

Answer 2

Sie relativen Größen und Positionierung der Mutter angeben müssen, was bedeutet, dass Sie Prozentsätze anstelle von Pixeln verwenden müssen. Es spielt keine Rolle, wie groß der Elternteil ist, das Verhältnis bleibt gleich, damit das Kind in der Lücke enthalten ist. Nach ein wenig Experimentieren habe ich festgestellt, dass die folgenden Prozentsätze Ihr Problem lösen.

#secondContainer { 
    position: absolute; 
    left: calc(40%); 
    top: calc(40%); 
    height: 20%; 
    width: 20%; 
    border: 1px solid red; 
    z-index: 2; 
} 

Erläuterung:

• Erstens, Sie müssen nicht für diese Aufgabe Transformation verwenden, so dass ich entfernt es.
• Sie möchten die Größe des untergeordneten Elements proportional zum übergeordneten Element haben, in diesem Fall 20%. Auf diese Weise wird es immer zur Lücke passen.
• Um das untergeordnete div im übergeordneten div zentriert zu lassen, geben Sie top und links Attribute mit Prozentangaben erneut an. Der benötigte Wert ist 50% - die Hälfte seiner Größe, die in diesem Fall 40% sowohl in der Breite als auch in der Höhe ist.

Ich habe den Code auf eine fiddle hochgeladen. Sie werden sehen, dass es nicht perfekt zentriert ist - es ist, weil das Bild auf der Rückseite den Text unten hat, deshalb ist die Lücke nicht genau in der Mitte.