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

J'ai besoin de faire des rectangles "fluides" et non des carrés.... donc MERCI à JOPL .... cela n'a pris qu'une minute....

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

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

Answer 2

Vous pouvez définir son before y after pour imposer un rapport largeur/hauteur constant

HTML :

<div class="squared"></div>

CSS :

.squared {
  background: #333;
  width: 300px; 
}
.squared::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.squared::after {
  content: '';
  display: block;
  clear: both;
}

Answer 3

Je décrirai la solution JS dans une réponse séparée :

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

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

(ou enregistrer l'écouteur d'événement dynamiquement).

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

Answer 4

Solution avec Jquery

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

Answer 5

J'ai fait quelque chose de similaire avec l'IFRAME de YouTube où l'iframe est à l'intérieur d'une grille qui change toujours en fonction du portrait/paysage, donc ce code a fonctionné :

Le code pour cette question est donc le suivant :

// Layout resize
let height = window.innerHeight;
let width = window.document.getElementById('player').parentNode.clientWidth;
    height = width / 1.77;

<div id="player"></div>

... etc ..

function onYouTubeIframeAPIReady() {
          // Layout resize
          let height = window.innerHeight;
          let width = window.document.getElementById('player').parentNode.clientWidth;
              height = width / 1.77;

          player = new YT.Player('player', {
            width: '100%',
            height: height,            
            videoId: currentVideoId,
            playerVars: {
              'autoplay': 0,
              'loop': 0,
              'mute': 0,
              'controls': 0,
              'enablejsapi': 1,
              'playsinline': 0,
              'rel': 0,
              'widget_referrer': 'http://my domain ...'
            },
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange,
              'onError': onError
            }
          });
        }