Carré responsive

 

Astuces CSS : un carré responsive.

Un élément responsive qui reste carré (solution 1).

Un élément dit "responsive" est censé adapter sa largeur à celle de son parent c'est à dire au final, à celle de l'écran. Le plus simple est donc de définir sa largeur en pourcentage. L'ennui c'est que sa hauteur ne va pas évoluer de la même façon, et du coup il sera difficile d'obtenir un élément qui conserve sa forme carrée.

Une solution élégante consiste à utiliser une des unités nouvelles introduites récemment dans la norme CSS : le vw qui veut dire le viewport. Voir les unités de dimensions en CSS.
Cliquez sur l'exemple pour affiche le code CSS.

Cet élément reste carré quelque soit la largeur de l'écran.
Il peut être nécessaire de rafraichir la page pour constater le fonctionnement.

Un élément responsive qui reste carré (solution 2).

Une autre solution consiste à exploiter la particularité des marges intérieures ( padding ) : celle du haut et celle du bas, lorsqu'elles sont définies en pourcentage, se calculent d'après la largeur de l'élément parent.

Dans l'exemple ci-après, nous avons imbriqué deux div. Les styles sont appliqués sur l'élément extérieur ; tandis que le contenu est inséré dans l'élément intérieur.

Cet élément est carré quelque soit la largeur de l'écran.