Comment styliser une div pour qu'elle devienne un carré réactif ?

Question

Je veux que ma div adapte sa hauteur pour qu'elle soit toujours égale à sa largeur. La largeur est un pourcentage. Lorsque la largeur du parent diminue, la boîte doit diminuer en conservant son rapport d'aspect.

Comment le faire en CSS ?

Answer 1

Voici ce que j'ai trouvé. Voici ce que j'ai trouvé. un violon .

Tout d'abord, j'ai besoin de trois éléments d'habillage pour une forme carrée et un texte centré.

<div><div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</div></div></div>

Il s'agit de la feuille de style. Il utilise deux techniques, l'une pour formes carrées et un pour texte centré .

body > div {
    position:relative;
    height:0;
    width:50%; padding-bottom:50%;
}

body > div > div {
    position:absolute; top:0;
    height:100%; width:100%;
    display:table;
    border:1px solid #000;
    margin:1em;
}

body > div > div > div{
    display:table-cell;
    vertical-align:middle; text-align:center;
    padding:1em;
}