Quand je donne une image un pour cent de la largeur ou de la hauteur seulement il va s'agrandir/rétrécir en gardant 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 de l'ensemble à l'aide de pourcentage?
Cette question a déjà des réponses:
- Maintenir le rapport d'aspect d'un div avec CSS (5 réponses )
Réponses
Trop de publicités?
Vous pouvez le faire en utilisant uniquement CSS; pas de JavaScript requis. Cela repose sur le fait surprenant qu' padding-top de pourcentages par rapport à la largeur. Voici un exemple:
HTML
<div class = "wrapper">
<div class = "main">
This is your div with the specified aspect ratio.
</div>
</div>
CSS
.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: rgb(0, 140, 200); /* let's see it! */
}
Démo
Et voici une petite démo: petit lien.
Tomas Mulder
Points
452
Glander hors de Chris idée, une autre option est d'utiliser des pseudo éléments de sorte que vous n'avez pas besoin d'utiliser un positionnement absolu élément interne.
<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
Isaac
Points
1068
Nikita
Points
154
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%;
}
Peter
Points
7477
(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: http://jsfiddle.net/QtftX/1/
