Proportions

Bonjour

A part des images, qui par défaut gardent leurs proportions, sait-on définir des éléments dont les proportions ne changent pas quand on change les dimensions de l'écran?

Je m'explique:
J'ai une image de 300px de hauteur et 450 de largeur.
Si je dis

#image1 {
    height:50%;
    max-height:350px;    /* <- pour éviter la pixellisation si elle devenait trop grande */
}

j'aurai une image dont les proportions ne changent pas et dont l'échelle sera telle qu'elle occupe 50% de la hauteur de son conteneur, au maximum 350 pixels. La largeur de l'image "suivra" pour éviter qu'elle soit déformée.

Par contre je ne sais pas comment dire "je veux faire une div dont la hauteur soit 50% de son conteneur, au maximum 350 pixel et dont la largeur soit toujours 1,5 fois la hauteur."
J'ai essayé par

#div1 {
    height: 50%;
    max-height: 350px;
    width: calc(attr(height) * 1.5 );
}

ça ne lui fait ni chaud ni froid, du moins sur la version la plus récente de FF.

Une idée?
Modifié par PapyJP (06 Mar 2015 - 12:52)

En utilisant javascript on aurait ceci :
http://jsfiddle.net/Lbr3x9x3/1/

si quelqu’un a une solution sans js, je suis preneur.

adrien881 a écrit :
En utilisant javascript on aurait ceci :
http://jsfiddle.net/Lbr3x9x3/1/

si quelqu’un a une solution sans js, je suis preneur.

Oui bien sûr, mais justement je veux éviter "onresize" pour tout un tas de raisons.
Je pense que je vais néanmoins devoir m'y résoudre.

Comme je l'ai signalé dans d'autres fils sur ce forum, je suis en train s'essayer de rénover des pages qui sont pour certaines âgées de plus de 10 ans en utilisant les "standards" à la mode.
Je trouve un peu bizarre que les personnes qui ont pondu et implémenté ces standards n'ont apparemment pas pris conscience qu'un écran a deux dimensions...