animiertes Bild wird nicht verkleinert bei absoluter Position

[jarnold]

Ich habe ein Problem mit dem ich mich schon einige Wochen rumschlage ohne es lösen zu können. Ich möchte eine Webseite komplett in HMTL5 und CSS ohne die Verwendung von javascript oder anderen scripten erstellen. In der Webseite soll eine Diashow von Bildern erscheinen. Ich habe ein statisches Bild für den Fall, daß ein alter Browser verwendet wird, der mit @keyframes noch nichts anfangen kann. Dieses Foto ist relative positioniert in einem parent container. Wenn der Bildschirm kleiner ist als die minimal angegebene Größe, wird das Bild mit dem parent container proportional verkleinert.
Für die Animation verwende ich wie schon gesagt @keyframes. Die Bilder sind auch im parent container aber mit Positionierung absolute übereinander positioniert und erscheinen mit Hilfe von opacity. Solange der Bildschirm groß ist, kein Problem. Wenn aber der Bildschirm kleiner wird, bleibt die Größe des Bildes auf der minimalen Größe und verkleinert sich nicht weiter. Hat jemand eine Idee, wie man das lösen könnte ohne eine feste Mindestgröße für das statische Bild und die Animation zu nehmen oder Javascript zu verwenden?
Hier noch mal der Code:

#picture {                            /*statisches Bild*/
  float: left;
  margin: 1% 4% 2% 4%;
  text-align: left;
  width: 92%;
  }
#picture > img {
  width: 40%;
  max-width: 400px;
  float: left;
   }

#photo1{
opacity:0;
animation: fadeinphoto1 7s infinite;
-moz-animation: fadeinphoto1 7s infinite;
-webkit-animation: fadeinphoto1 7s infinite;
-o-animation: fadeinphoto1 7s infinite;
float:left;
position:absolute;

}

#photo2{
opacity:0;
animation: fadeinphoto2 7s 5s infinite;
-moz-animation: fadeinphoto2 7s 5s infinite;
-webkit-animation: fadeinphoto2 7s 5s infinite;
-o-animation: fadeinphoto2 7s 5s infinite;
float:left;
position: absolute;
}

@keyframes fadeinphoto1{
0%{opacity:0;}
20%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeinphoto2{
0%{opacity:0;}
20%{opacity:1;}
50%{opacity:1;}
70%{opacity:0;}
100%{opacity:0;}
}

@-moz-keyframes fadeinphoto1{
0%{opacity:0;}
20%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes fadeinphoto2{
0%{opacity:0;}
20%{opacity:1;}
50%{opacity:1;}
70%{opacity:0;}
100%{opacity:0;}
}

@-webkit-keyframes fadeinphoto1{
0%{opacity:0;}
20%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;}
}
 @-webkit-keyframes fadeinphoto2{
0%{opacity:0;}
20%{opacity:1;}
50%{opacity:1;}
70%{opacity:0;}
100%{opacity:0;}
}
@-o-keyframes fadeinphoto1{
0%{opacity:0;}
20%{opacity:0;}
50%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;}
}
 @-o-keyframes fadeinphoto2{
0%{opacity:0;}
20%{opacity:1;}
50%{opacity:1;}
70%{opacity:0;}
100%{opacity:0;}
}
#box {
width: 40%;
  max-width: 400px;

position: absolute;
}

html:
<div id="picture">
       <img alt="statisches Bild" src="statischesbild.jpg">

<div id="box">
        <img id="photo1" alt="Animation1" src="photo1.jpg">
        <img id="photo2" alt="Animation2" src="photo2.jpg">

</div>

[ChrisB]

Hi,

Wenn aber der Bildschirm kleiner wird, bleibt die Größe des Bildes auf der minimalen Größe und verkleinert sich nicht weiter.

Das ist die handelsübliche Definition von Minimum.

MfG ChrisB