Comment Redimensionner automatiquement un DIV en CSS tout en gardant les proportions?

Ce que j'ai est une norme formulaire en HTML qui permet à l'utilisateur de sélectionner une "Largeur" et "Hauteur" de l'option (chacune avec des valeurs allant de 1 à 10). Lors de l'envoi du formulaire, il l'envoie à un PHP/HTML page PHP attrape la "Largeur" et "Hauteur" des variables et l'attribue à une largeur et une hauteur d'un DIV.

Mais ce que j'essaie de faire c'est d'utiliser la "Largeur" et "Hauteur" variables à attribuer un ratio d'aspect pour que le DIV, et alors que la DIV de redimensionnement automatique à 100% du conteneur, il est à l'intérieur, mais tout en gardant le même ratio d'aspect.

Exemple:
L'utilisateur sélectionne une Largeur de 4 et une Hauteur de 2, puis envoie le formulaire. Sur la réception de la page PHP, que DIV (celui qui reçoit la largeur et la hauteur des ratios) est à l'intérieur d'un conteneur 1000px de largeur et de 600px de hauteur. Alors maintenant, que DIV redimensionne à 1000px de large et 500px de haut (ce qui serait le ratio d'aspect de 4 à 2)

Des idées, des codes, des scripts serait extrêmement utile, merci beaucoup!

Aaron

InformationsquelleAutor Aaron | 2012-08-29

Depuis des valeurs en pourcentage de la padding-* propriétés sont calculées par rapport à la largeur de la boîte contenant le bloc, vous pourriez:

Ajouter un mannequin élément sans contenu, mais avec un pourcentage dans un remplissage vertical (padding-top ou padding-bottom), correspondant au rapport d'aspect désiré.
Utiliser absolument le positionnement de supprimer tout contenu à partir de l'écoulement normal de l'élément, dans le but de prévenir l'augmentation de la hauteur. Puis, le faire grandir pour remplir le récipient.

Cette idée est tirée de http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

CSS:

#container {
  position: relative;
  width: 50%;
}
#dummy {
  padding-top: 75%; /* 4:3 aspect ratio */
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}

HTML:

<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

Note de la marge verticale peut être utilisée à la place de remplissage vertical, mais alors il y aurait de la marge de l'effondrement. Pour éviter cela, ajoutez

#container {
  display: inline-block;
}

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

HTML:

<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

À l'aide de ::before pseudo-élément, il n'y a pas besoin d'utiliser un élément de type dummy:

#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}

CSS:

#container {
  position: relative;
  width: 50%;
}
#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}

HTML:

<div id="container">
  <div id="element">
    some text
  </div>
</div>

Formidable, a parfaitement fonctionné. Merci beaucoup!
Qu'est-ce content: '.'
Le pseudo-élément a besoin de quelques content afin d'être affiché. J'ai édité pour le plus simple content: ''.

InformationsquelleAutor Oriol

1

Vous pouvez prendre avantage du fait que remplace éléments peuvent avoir une valeur intrinsèque de l'aspect ratio.
Selon le spec,

Si, au contraire, 'hauteur' a une valeur calculée de 'auto', et l'élément
a une valeur intrinsèque de rapport alors la valeur utilisée de "hauteur" est:

(utilisé largeur) /(intrinsèque ratio)

Par conséquent, vous pouvez
- Créer un élément remplacé le rapport intrinsèque, puis définissez width:100% à elle.
- Utiliser absolument le positionnement de supprimer tout contenu à partir de l'écoulement normal de l'élément, dans le but de prévenir l'augmentation de la hauteur. Puis, le faire grandir pour remplir le récipient.
Ensuite, le conteneur sera le ratio d'aspect que vous souhaitez.

Le premier élément pourrait être une image. Vous pouvez créer des images de format d'image désiré en PHP, ou à l'aide d'un tiers de service web comme http://placehold.it/

Dans l'extrait suivant, j'utilise un 2px 1px de largeur et de hauteur de l'image ():

CSS:
```
.container {
 border: 3px solid blue;
 position: relative;
}
.container > img {
 width: 100%;
 display: block;
 visibility: hidden;
}
.container > .content {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 overflow: auto;
}
```
HTML:
```
<div class="container">
 <img src="http://i.stack.imgur.com/Lfmr6.png" />
 <div class="content">
 0102030405
 0607080910
 1112131415
 1617181920
 </div>
</div>
```
Vous pouvez également utiliser un <canvas> élément au lieu d'une image. De cette façon, vous n'avez pas besoin de créer des images, mais il ne fonctionne pas sur les anciens navigateurs (IE 8 et versions antérieures):
```
<div class="container">
 <canvas height="1" width="2"></canvas>
 <div class="content">...</div>
</div>
```
CSS:
```
.container {
 border: 3px solid blue;
 position: relative;
}
.container > canvas {
 width: 100%;
 display: block;
 visibility: hidden;
}
.container > .content {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 overflow: auto;
}
```
HTML:
```
<div class="container">
 <canvas height="1" width="2"></canvas>
 <div class="content">
 0102030405
 0607080910
 1112131415
 1617181920
 </div>
</div>
```
- Cela sonne comme il pourrait fonctionner, mais je ne suis pas sûr que je comprends ce que vous dites.
- Je n'ai pas le temps d'expliquer mieux, j'ai édité ma réponse l'ajout d'un exemple.
InformationsquelleAutor Oriol

Vous devez vous connecter pour publier un commentaire.