[Résolu] Ajuster la taille d'un conteneur

Bonjour

J'ai une div "conteneur' position:relative qui contient une image position:absolute, pour d'autres raisons.
Connaissant la hauteur de l'image, j'ai mis celle du conteneur à une valeur qui va bien pour que la suite de la page se présente comme je veux.

Maintenant, j'aimerais pouvoir supporter des tailles d'écran diverses.
J'ai abouti au CSS suivant

            html, body {width:100%; height:100%; }
            #container {
                position: relative;
                text-align:center;
                margin:20px auto;
                width:720px;
                max-width:100%;
                height:481px;
            }
            #container img {
                position:absolute;
                display:block;
                min-width:300px;
                max-width:100%;
            }

Lorsque je réduis la largeur de l'écran, à partir d'un certain moment tout ce beau monde se met à réduire de largeur, et l'image se met également à réduire en hauteur pour garder sa proportion.
Question: que mettre dans max-height du conteneur pour que sa hauteur s'ajuste en quelque sorte à celle de l'image?
J'aimerais éviter de faire une fonction resize (même si elle tient en quelques lignes) pour quelque chose qui relève à mon sens d'un bon CSS standard.
Jusqu'à présent j'ai toujours eu beaucoup de mal avec le réglage des hauteurs d'éléments et mes pages sont bourrées de "onresize" qui ne servent qu'à ça, la largeur présentant moins de difficultés.
Modifié par PapyJP (27 Feb 2015 - 13:06)

Bon! c'est décidément le jour où le fait d'expliquer un problème me permet de trouver la solution.
Même si ce site ne servait qu'à cela, il serait hautement utile!

En fait c'est tout bête: mettre une image transparente de la même taille que l'image absolute

          #container {
                position: relative; text-align:center;
                margin:20px auto;
                width:720px;
                max-width:100%;
            }
            #container img {
                display:block;
                min-width:300px;
                max-width:100%;
            }
            #image1 {
                position:absolute;
                top:0;
                z-index:100;}
            #image2 {} 

Lorsqu'on réduit la taille de la fenêtre, l'image transparente se réduit de même que l'autre et le conteneur suit le mouvement.

Maintenant si vous avez mieux, je suis bien entendu preneur!