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

Fonctionne avec presque tous les navigateurs.

Vous pouvez essayer de donner padding-bottom en pourcentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

La div extérieure forme un carré et la div intérieure contient le contenu. Cette solution a fonctionné pour moi à plusieurs reprises.

Voici une jsfiddle

Answer 2

Pour obtenir ce que vous recherchez, vous pouvez utiliser la fonction longueur en pourcentage de la fenêtre de visualisation vw .

Voici un exemple rapide que j'ai réalisé sur jsfiddle .

HTML:

<div class="square">
    <h1>This is a Square</h1>
</div>

CSS:

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

Je suis sûr qu'il existe de nombreuses autres façons de procéder, mais celle-ci m'a semblé la meilleure.

Answer 3

HTML

<div class='square-box'>
    <div class='square-content'>
        <h3>test</h3>
    </div>
</div>

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/

Answer 4

Il suffit de spécifier un fond de remplissage de la même taille que la largeur en pourcentage. Ainsi, si vous avez une largeur de 50 %, il vous suffit d'utiliser l'exemple suivant

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

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

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

Answer 5

Une autre méthode consiste à utiliser un fichier 1x1.png transparent avec l'option width: 100% , height: auto dans un div et un contenu absolument positionné à l'intérieur de celui-ci :

html :

<div>
    <img src="1x1px.png">
    <h1>FOO</h1>
</div>

css :

div {
    position: relative;
    width: 50%;
}

img {
    width: 100%;
    height: auto;
}

h1 {
    position: absolute;
    top: 10px;
    left: 10px;
}

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