web-dev-qa-db-fra.com

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

Je veux que ma div adapte sa hauteur à toujours égale à sa largeur. La largeur est percental. Lorsque la largeur du parent diminue, la case doit diminuer en conservant son rapport de format.

Comment faire c'est CSS?

csscss3layoutresponsive-designaspect-ratio
157
danijar

Pour obtenir ce que vous cherchez, vous pouvez utiliser le viewport-length lengthvw.

Voici un exemple rapide que j'ai fait 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 y a beaucoup d'autres façons de faire mais cette façon m'a semblé la meilleure.

164
Daniel Burkhart

Fonctionne sur presque tous les navigateurs.

Vous pouvez essayer de donner padding-bottom sous forme de pourcentage.

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

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

Voici un jsfiddle

180
rahulbehl

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/

43
gidzior

C'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 simplement cet exemple ci-dessous

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

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

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

32
Chipe

Une autre méthode consiste à utiliser un 1x1.png transparent avec width: 100%, height: auto dans un div et un contenu parfaitement positionné:

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/

7
gskalinskii

C'est ce que je suis venu avec. Voici n violon .

Premièrement, j'ai besoin de trois éléments d'emballage 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>

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