CSS : adapter la hauteur à la largeur - éventuellement avec un facteur de forme

Question

J'ai implémenté une carte GoogleMapsV3 dans un site twitterBootstrap en responsive design.

Mais ma question est très simple : j'ai :

<div id="map"></map>

et

#map{ width: 100%; height: 200px }

J'aimerais pouvoir modifier la hauteur en fonction du facteur de forme. Comme dans ce "in my dreams CSS".

#map { width: 100%; height: width * 1.72 }

J'ai essayé d'omettre la hauteur, de régler sur auto, et toutes sortes de persentages - mais cela n'a eu pour effet que de faire s'effondrer la div sur moi en permanence.

Je n'ai aucun problème à écrire une solution js, mais j'espère une solution CSS simple et claire, éventuellement CSS3.

Si ce n'est pas possible, quel serait le meilleur moyen de me sortir de là ? (timers, events...ou autres)

Answer 1

Le voici. Du pur CSS. Vous avez besoin d'un élément "conteneur" supplémentaire.

Le violon

(tinkerbin, en fait) : http://tinkerbin.com/rQ71nWDT (Tinkerbin est mort.)

La solution.

Note J'utilise un 100% dans l'exemple. Vous pouvez utiliser le pourcentage de votre choix.

Comme les pourcentages de hauteur sont relatifs à la hauteur de l'élément parent, nous ne pouvons pas nous y fier. Nous devons nous appuyer sur autre chose. Heureusement, le remplissage est relatif à la largeur - qu'il s'agisse d'un remplissage horizontal ou vertical. En padding-xyz: 100% 100 % équivaut à 100 % de la largeur de la boîte.

Malheureusement, le rembourrage n'est rien d'autre que du rembourrage. La hauteur de la boîte de contenu est de 0. Pas de problème !

Collez un élément absolument positionné, donnez-lui 100 % de largeur et 100 % de hauteur et utilisez-le comme boîte de contenu. La hauteur de 100 % fonctionne parce que les hauteurs en pourcentage sur les éléments positionnés de manière absolue sont relatives à la boîte de remplissage de la boîte sur laquelle ils sont positionnés de manière relative.

HTML :

<div id="map_container">
  <div id="map">
  </div>
</div>   

CSS :

#map_container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
}

Answer 2

Vous pouvez essayer d'utiliser vw pour la hauteur. https://developer.mozilla.org/en/docs/Web/CSS/length

Quelque chose comme

div#map {
     width: 100%;
     height: 60vw;
}

La largeur de la div est ainsi fixée à 60 % de la largeur de la fenêtre. Vous devrez probablement utiliser calc to adjust pour prendre en compte le padding

Answer 3

Pour ce faire, vous devrez utiliser JavaScript, ou vous appuyer sur le logiciel quelque peu soutenu calc() Expression CSS.

window.addEventListener("resize", function(e) {
    var mapElement = document.getElementById("map");
    mapElement.style.height = mapElement.offsetWidth * 1.72;
});

Ou en utilisant CSS calc (voir le support ici) : http://caniuse.com/calc )

#map {
    width: 100%;
    height: calc(100vw * 1.72)
}

Answer 4

.video {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* ratio 16/9 */
}

.video iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

16:9

padding-bottom = 9/16 * 100 = 56,25

Answer 5

Essayez les fenêtres de visualisation

Vous pouvez utiliser les données relatives à la largeur et calculer la hauteur en conséquence

Cet exemple concerne une image de 150x200px

width: calc(100vw / 2 - 30px);
height: calc((100vw/2 - 30px) * 1.34);