Un cadre carré et responsive - Astuces en CSS
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 CSS de dimension.
Cliquez sur l'exemple pour affiche le code CSS.
Il peut être nécessaire de rafraîchir 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.