wake-up-neo.net

CSS-Skalierungshöhe, um die Breite anzupassen - möglicherweise mit einem Formfaktor

Ich habe eine GoogleMapsV3-Karte in eine responsive Design-Site von twitterBootstrap implementiert.

Aber meine Frage ist ganz einfach: Ich habe:

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

und

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

Ich möchte die Höhe in einen Formfaktor ändern können. Wie in diesem "in meinen Träumen CSS"

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

Ich habe versucht, die Höhe wegzulassen, auf auto zu setzen und alle möglichen Arten von Persentagen - aber nur, um das Div bei mir immer zusammenzubrechen.

Ich habe kein Problem, eine js-Lösung zu schreiben, hoffe aber auf eine einfache CSS-Lösung (CSS3)

Wenn nicht möglich, was wäre der beste Weg, um mich aus dieser Sache heraus zu bewegen? (Timer, Ereignisse ... oder ähnliches)

41
Steen

Dazu müssen Sie JavaScript verwenden oder sich auf den etwas unterstützten calc()-CSS-Ausdruck verlassen.

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

Oder verwenden Sie CSS calc (siehe Support hier: http://caniuse.com/calc )

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

Hier ist es. Reines CSS. Sie benötigen ein zusätzliches "Container" -Element.

Die Geige

(Tinkerbin, eigentlich): http://tinkerbin.com/rQ71nWDT (Tinkerbin ist tot.)

Die Lösung.

Hinweis _ ​​Im gesamten Beispiel verwende ich 100%. Sie können den Prozentsatz verwenden, den Sie möchten.

Da Höhenprozentsätze relativ zur Höhe des übergeordneten Elements sind, können wir uns nicht darauf verlassen. Wir müssen uns auf etwas anderes verlassen. Glücklicherweise ist die Polsterung relativ zur Breite - egal ob horizontale oder vertikale Polsterung. In padding-xyz: 100% entspricht 100% der Breite der Box.

Padding ist leider genau das, Padding. Die Höhe der Inhaltsbox ist 0. Kein Problem!

Kleben Sie ein absolut positioniertes Element, geben Sie ihm 100% Breite, 100% Höhe und verwenden Sie es als eigentliche Inhaltsbox. Die Höhe von 100% funktioniert, da die prozentualen Höhen von absolut positionierten Elementen relativ zur Polsterbox der Box sind.

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

Sie könnten versuchen, vw für die Höhe . https://developer.mozilla.org/de/docs/Web/CSS/length zu verwenden.

So etwas wie

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

Dies würde die Breite des Bereichs auf 60% der Breite des Ansichtsfensters festlegen. Sie werden wahrscheinlich calc verwenden müssen, um sich an die Polsterung anzupassen…

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

auffüllboden = 9/16 * 100

4

Ich muss "fließende" Rechtecke machen, keine Quadrate .... also DANKE an JOPL .... hat nicht gedauert, aber eine Minute ....

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


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

Versuchen Sie es mit Ansichtsfenstern

Sie können die Breitendaten verwenden und die Höhe entsprechend berechnen

Dieses Beispiel bezieht sich auf ein 150x200px-Bild

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

Lassen Sie mich die JS-Lösung als separate Antwort beschreiben:

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

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

(oder den Ereignis-Listener dynamisch registrieren).

mapElement.style.width * 1.72 funktioniert nicht, da die Breite explizit für das Element festgelegt werden muss, entweder mit dem DOM-Attribut width oder in der CSS-Eigenschaft width des Inline-Stils.

0

Lösung mit Jquery

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