Lorsque je donne à une image un pourcentage de largeur ou de hauteur, elle grossira/réduira en conservant ses proportions, mais si je veux le même effet avec un autre élément, est-il possible de lier la largeur et la hauteur en utilisant le pourcentage?
Vous pouvez le faire en utilisant du CSS pur; pas de JavaScript nécessaire. Ceci utilise le fait (quelque peu contre-intuitif) que padding-top
pourcentages sont relatifs à la largeur du bloc contenant . Voici un exemple:
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-color: deepskyblue;
/* let's see it! */
color: white;
}
<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>
Pour démentir l'idée de Chris, une autre option consiste à utiliser des pseudo-éléments afin de ne pas utiliser un élément interne à positionnement absolu.
<style>
.square {
/* width within the parent.
can be any percentage. */
width: 100%;
}
.square:before {
content: "";
float: left;
/* essentially the aspect ratio. 100% means the
div will remain 100% as tall as it is wide, or
square in other words. */
padding-bottom: 100%;
}
/* this is a clearfix. you can use whatever
clearfix you usually use, add
overflow:hidden to the parent element,
or simply float the parent container. */
.square:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
J'ai mis en place une démo ici: http://codepen.io/tcmulder/pen/iqnDr
MODIFIER:
Maintenant, reprenant l'idée d'Isaac, il est plus facile avec les navigateurs modernes d'utiliser simplement des unités vw pour forcer les proportions (bien que je n'utilise pas aussi vh comme lui ou que les proportions changent en fonction de la hauteur de la fenêtre).
Donc, cela simplifie les choses:
<style>
.square {
/* width within the parent (could use vw instead of course) */
width: 50%;
/* set aspect ratio */
height: 50vw;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
J'ai mis en place une démo modifiée ici: https://codepen.io/tcmulder/pen/MdojRG?editors=11
Vous pouvez également définir la hauteur maximale, la largeur maximale et/ou la hauteur minimale, la largeur minimale si vous ne voulez pas qu'elle devienne ridiculement grande ou petite, car elle est basée sur la largeur du navigateur et non sur le conteneur. croître/rétrécir indéfiniment.
Notez que vous pouvez également redimensionner le contenu de l'élément si vous définissez la taille de la police sur une mesure vw et sur tous les paramètres internes de la mesure. Voici une démonstration de ce travail: https://codepen.io/tcmulder/pen/VBJqLV? Editors = 11
<style>
#aspectRatio
{
position:fixed;
left:0px;
top:0px;
width:60vw;
height:40vw;
border:1px solid;
font-size:10vw;
}
</style>
<body>
<div id="aspectRatio">Aspect Ratio?</div>
</body>
La chose clé à noter ici est vw
= largeur de la fenêtre d'affichage, et vh
= hauteur de la fenêtre d'affichage
C'est ma solution
<div class="main" style="width: 100%;">
<div class="container">
<div class="sizing"></div>
<div class="content"></div>
</div>
</div>
.main {
width: 100%;
}
.container {
width: 30%;
float: right;
position: relative;
}
.sizing {
width: 100%;
padding-bottom: 50%;
visibility: hidden;
}
.content {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
margin-top: -50%;
}
(function( $ ) {
$.fn.keepRatio = function(which) {
var $this = $(this);
var w = $this.width();
var h = $this.height();
var ratio = w/h;
$(window).resize(function() {
switch(which) {
case 'width':
var nh = $this.width() / ratio;
$this.css('height', nh + 'px');
break;
case 'height':
var nw = $this.height() * ratio;
$this.css('width', nw + 'px');
break;
}
});
}
})( jQuery );
$(document).ready(function(){
$('#foo').keepRatio('width');
});
Exemple de travail: http://jsfiddle.net/QtftX/1/