Comment styliser une div pour être un carré réactif?

Je veux que mon div adapte sa hauteur pour toujours égaler sa largeur. La largeur est percentale. Lorsque la largeur du parent diminue, la boîte devrait diminuer en conservant son rapport d’aspect.

Comment faire cela est CSS?

Pour atteindre ce que vous recherchez, vous pouvez utiliser la longueur de pourcentage de la fenêtre d’ vw .

Voici un exemple rapide que j’ai fait sur jsfiddle .

HTML:

 

This is a Square

CSS:

 .square { background: #000; width: 50vw; height: 50vw; } .square h1 { color: #fff; } 

Je suis sûr qu’il y a beaucoup d’autres façons de le faire, mais cette façon de faire me semblait la meilleure.

Fonctionne sur presque tous les navigateurs.

Vous pouvez essayer de donner un padding-bottom en pourcentage.

 
Content goes here

Le div externe crée un carré et le div interne contient le contenu. Cette solution a fonctionné pour moi plusieurs fois.

Voici un jsfiddle

HTML

 

test

CSS

 .square-box{ position: relative; width: 50%; overflow: hidden; background: #4679BD; } .square-box:before{ content: ""; display: block; padding-top: 100%; } .square-content{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: white; text-align: center; } 

http://jsfiddle.net/38Tnx/1425/

Il est aussi simple que de spécifier un fond de remplissage de la même taille que la largeur en pourcentage. Donc, si vous avez une largeur de 50%, utilisez cet exemple ci-dessous

 id or class{ width: 50%; padding-bottom: 50%; } 

Voici un jsfiddle http://jsfiddle.net/kJL3u/2/

Version modifiée avec texte réactif : http://jsfiddle.net/kJL3u/394

Une autre méthode consiste à utiliser un transparent 1×1.png avec la width: 100% , la height: auto dans un div et le contenu en position absolue:

html:

 

FOO

css:

 div { position: relative; width: 50%; } img { width: 100%; height: auto; } h1 { position: absolute; top: 10px; left: 10px; } 

Fidle: http://jsfiddle.net/t529bjwc/

C’est ce que j’ai trouvé. Voici un violon

Premièrement, j’ai besoin de trois éléments enveloppants pour une forme carrée et un texte centré.

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

Ceci est la feuille de stylet. Il utilise deux techniques, une pour les formes carrées et une pour le 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; }