CSS hauteur identique à la largeur [dupliquer]
cette question a déjà une réponse ici:
j'aimerais faire le prochain truc dans mon fichier css pour que width=height sans définir de pixels. Je veux faire ce quelle que soit la résolution de l' navigateur, pour avoir les mêmes valeurs sur ces deux dimensions.
#test{
width: 20%;
height: (same as width);
}
est-ce possible?
3 réponses
cet effet peut être simulé avec padding ou margin puisque ces valeurs sont relatives au width du conteneur pour l'élément.
div {
background: orange;
width: 20%;
padding-top: 20%;
}<div></div>Cochez cette http://jsfiddle.net/4z8PT/
mise à jour:
les solutions à cette question ne répondent pas à l'exigence pour avoir du contenu, si c'est le cas, vous pouvez avoir besoin d'inclure des variables de trouver une solution. Par exemple le contenu d'augmenter la largeur ou pas ? sera-t-il caché si le contenu déborde le conteneur ?. Si vous avez juste besoin de la solution la plus simple par exemple un texte, vous pouvez toujours faire quelque chose comme ça pour le garder réactif:
div {
position: relative;
background: orange;
width: 20%;
padding-top: 20%;
overflow: hidden;
}
span {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
text-align: center;
padding: 10px;
display: flex;
align-items: center;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor porro animi iste quaerat corporis perferendis et!</span>
</div>vous pouvez également le faire avec le nouveau CSS viewport units .
CSS
div {
background:pink;
width:20vw; /* 20% of the viewport width */
height: 20vw;
}
le soutien est assez bon sur les navigateurs modernes (IE9+) ( caniuse )
vous pouvez utiliser le rembourrage vertical sur un pseudo-élément en valeur%, donc il prend la largeur comme référence et lui permet d'insérer facilement du contenu dans ce carré .
en gros, ça pourrait être:
#test{
width: 20%;
}
#test:before{
content:'';
padding:50% 0; /* vertical value as 100% equals width */
display:inline-block;
}
ou
#test{
width: 20%;
overflow:hidden;
}
#test:before{
content:'';
padding-top:100%; /* vertical value as 100% equals width */
float:left;
}
http://codepen.io/anon/pen/bBrgl
voir: http://dev.w3.org/csswg/css-box/#the-margin-properties pour plus de compréhension ou de la marge verticale/rembourrage en %