[html/CSS] Bildergröße ändert sich nicht beim Zoomen

[CosmoCortney]

[html/CSS] Bildergröße ändert sich nicht beim Zoomen

Hallo,
um das layout meiner Website anzupassen, habe ich 2 Bilder in einer bestimmten Position übereinander gelegt.
Nun, wenn ich zoome, bleiben die Bilder auf ihrer Größe und überdecken den Inhalt der Seite. (Ich denke, dass nicht jeder einen Zoom von 100% eingestellt hat..)

Hier der code:

html:

<img id="bild1" src="images\matrix.gif">
<img id="bild2" src="images\cat.png">

css:

#bild1 
{
    height: 37%;
    display: block;
    position: absolute; 
    top: 40px;
    margin-left: auto;
    margin-right: auto;
    z-index:3;
    left: 46%;
right: 0;
}

#bild2
{
    height: 50%;
    display: block;
    position: absolute; 
    top: 15px;
   margin-left: auto;
    margin-right: auto;
z-index:4;
    left: 0;
right: 0;
}

Ich habe es schon anders versucht, aber dann haben sich beim Zoomen die Positionen verändert

 

[crys_]

AW: [html/CSS] Bildergröße ändert sich nicht beim Zoomen

Mach mal Screenshots was genau passiert

 

[CosmoCortney]

AW: [html/CSS] Bildergröße ändert sich nicht beim Zoomen

Hier:

 

[crys_]

AW: [html/CSS] Bildergröße ändert sich nicht beim Zoomen

Das beste wäre es den Inhalt über das Bild zu legen. Alternativ kannst du probieren die Höhe nicht in % anzugeben sondern in Pixeln. Es kann sein das die Prozent in der Höhe nicht korrekt skaliert werden. Du kannst auch probieren dem body explizit Höhe 100% zuzuweisen.