web-dev-qa-db-fra.com

Changer de manière réactive les proportions

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?

htmlcssresponsive-design
214
ilyo

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>
528
Chris

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

44
Tomas Mulder
<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

30
Isaac

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%;
}

http://jsfiddle.net/aG4Fs/3/

3
Mykyta Shyrin
(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/

2
Peter