Hauteur égale à la largeur dynamique (disposition du liquide CSS) [dupliquer]
cette question a déjà une réponse ici:
- Maintenir le ratio d'aspect d'un div avec CSS 19 réponses
est-il possible de régler la même hauteur que la largeur (rapport 1:1)?
exemple
+----------+
| body |
| 1:3 |
| |
| +------+ |
| | div | |
| | 1:1 | |
| +------+ |
| |
| |
| |
| |
| |
+----------+
CSS
div {
width: 80%;
height: same-as-width
}
9 réponses
en utilisant jQuery vous pouvez atteindre cet objectif en faisant
var cw = $('.child').width();
$('.child').css({'height':cw+'px'});
vérifier l'exemple de fonctionnement à http://jsfiddle.net/n6DAu/1 /
[mise à Jour: Même si j'ai découvert cette astuce de façon indépendante, depuis j'ai appris que Thierry Coblence me battre pour elle. Vous pouvez trouver son 2009 article sur une liste à part. Le crédit là où le crédit est dû.]
je sais que c'est une vieille question, mais j'ai rencontré un problème similaire que je a fait résoudre seulement avec CSS. Voici mon blog post qui discute de la solution. Inclus dans la poste est un live exemple . Le Code est affiché de nouveau ci-dessous.
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%;
/* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver/* show me! */
}
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
il y a un moyen d'utiliser CSS!
si vous définissez votre largeur en fonction du conteneur parent, vous pouvez définir la hauteur à 0 et padding-bottom au pourcentage qui sera calculé en fonction de la largeur actuelle:
.some_element {
position: relative;
width: 20%;
height: 0;
padding-bottom: 20%;
}
Cela fonctionne bien dans tous les principaux navigateurs.
JSFiddle: https://jsfiddle.net/ayb9nzj3 /
il est possible sans aucun Javascript:)
cet article Le décrit parfaitement - http://www.mademyday.de/css-height-equals-width-with-pure-css.html
the HTML:
<div class='box'>
<div class='content'>Aspect ratio of 1:1</div>
</div>
The CSS:
.box {
position: relative;
width: 50%; /* desired width */
}
.box:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}
Simple et neet: utiliser vw
unités pour une hauteur/largeur de réponse en fonction de la largeur du viewport.
vw: 1/100ème de la largeur du viewport. ( source MDN )
HTML:
<div></div>
CSS pour un rapport d'aspect 1:1:
div{
width:80vw;
height:80vw; /* same as width */
}
Table pour calculer la hauteur selon le rapport d'aspect désiré et la largeur de l'élément.
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
cette technique vous permet de:
- insérer tout contenu à l'intérieur de l'élément sans utiliser
position:absolute;
- no un necessary HTML markup (only one element)
- adapter le rapport d'aspect des éléments en fonction de la hauteur du viewport en utilisant les unités vh
- vous pouvez faire un carré responsive ou un autre rapport d'aspect qui s'adapte toujours dans le viewport selon la hauteur et la largeur du viewport (voir cette réponse: carré Responsive selon la largeur et la hauteur du viewport ou ce demo )
ces unités sont soutenu par IE9+ voir canIuse pour plus d'information
méthode extrêmement simple jsfiddle
HTML
<div id="container">
<div id="element">
some text
</div>
</div>
CSS
#container {
width: 50%; /* desired width */
}
#element {
height: 0;
padding-bottom: 100%;
}
de développer le rembourrage supérieur/inférieur technique, il est possible d'utiliser un pseudo-élément pour régler la hauteur de l'élément. Utilisez le débordement, le flottant et les marges négatives pour supprimer le pseudo-élément de la vue et du flux.
cela vous permet de placer du contenu à l'intérieur de la boîte sans utiliser un positionnement supplémentaire de div et/ou CSS.
.fixed-ar {
overflow: hidden;
}
.fixed-ar:before {
content: "";
float: left;
margin-left: -10px;
width: 10px;
padding-top: 100%;
}
.fixed-ar-4-3:before {
/* 100 * 3 / 4 = 75 */
padding-top: 75%;
}
.fixed-ar-16-9:before {
/* 100 * 9 / 16 = 56.25 */
padding-top: 56.25%;
}
/* examples */
.fixed-ar {
margin: 1em 0;
max-width: 400px;
color: #999;
background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat;
background-size: contain;
}
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>
c'est un commentaire à la réponse de Nathan, mais je n'ai pas encore le droit de le faire...
Je voulais maintenir le format, même s'il y a trop de choses à rentrer dans la boîte. Son exemple élargit la hauteur, changeant le rapport d'aspect. J'ai trouvé en ajoutant
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
à la .élément aidé. Voir http://jsfiddle.net/B8FU8/3111 /
largeur: 80vmin; hauteur: 80vmin;
CSS n'80% de la plus petite vue, la hauteur ou la largeur