web-dev-qa-db-fra.com

Hauteur de l'échelle CSS pour correspondre à la largeur - éventuellement avec un facteur de forme

J'ai implémenté une carte GoogleMapsV3 dans un site de conception réactif de base de twitterBootstrap.

Mais ma question est assez simple: j’ai:

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

et

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

J'aimerais pouvoir changer la hauteur en facteur de forme. Comme dans ce "dans mes rêves CSS"

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

J'ai essayé d'oublier la hauteur, la mise en auto et toutes sortes de coloris, mais seulement pour que la div m'écroule toujours.

Je n'ai pas de problème à écrire une solution-js, mais j'espère une solution simple en CSS cleancut, possible en CSS3

Si ce n’est pas possible, quel serait le moyen optimal de sortir de là ?? (minuteries, événements ... ou similaires)

htmlcssresponsive-design
41
Steen

Pour cela, vous devez utiliser JavaScript ou vous appuyer sur l'expression CSS calc() quelque peu prise en charge.

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

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

#map {
    width: 100%;
    height: calc(width * 1.75)
}
9
Greg

C'est ici. CSS pur. Vous avez besoin d'un élément 'conteneur' supplémentaire.

Le violon

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

La solution.

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

Les pourcentages de hauteur étant relatifs à la hauteur de l'élément parent, nous ne pouvons pas nous en fier. Nous devons compter sur autre chose. Heureusement, le rembourrage est relatif à la largeur, qu'il s'agisse d'un rembourrage horizontal ou vertical. Dans padding-xyz: 100%, 100% est égal à 100% de la largeur de la boîte.

Malheureusement, le rembourrage n'est que cela, le rembourrage. La hauteur de la content-box est 0. Pas de problème!

Collez un élément en position absolue, donnez-lui une largeur de 100%, une hauteur de 100% et utilisez-le comme zone de contenu. La hauteur de 100% fonctionne car les hauteurs en pourcentage des éléments en position absolue sont relatives à la zone de rembourrage de la boîte par rapport à celles-ci.

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

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

Quelque chose comme

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

Cela définirait la largeur de la div à 60% de la largeur de la fenêtre. Vous aurez probablement besoin d’utiliser calc pour vous ajuster afin de prendre en compte le rembourrage…

45
Pit
.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

4
Pax Exterminatus

Je dois faire des rectangles "fluides" et non des carrés ... alors MERCI à JOPL ... n'a pas pris qu'une minute ....

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


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

Permettez-moi de décrire la solution JS comme une réponse distincte:

function handleResize()
{
  var mapElement = document.getElementById("map");
  mapElement.style.height = (mapElement.offsetWidth * 1.72) + "px";
}

<div id="map" onresize="handleResize()">...</div>

(ou enregistrez l'écouteur d'événements dynamiquement).

mapElement.style.width * 1.72 ne fonctionnera pas, car il faut que la largeur soit définie explicitement sur l'élément, à l'aide de l'attribut DOM width ou de la propriété CSS width du style en ligne.

0
Alexander Pavlov

Solution avec Jquery

$(window).resize(function () {
    var width = $("#map").width();
    $("#map").height(width * 1.72);
});
0
Anand agrawal