Responsive Höhe proportional zur Breite

Ist es möglich zu implementieren, die folgende Logik usic HTML und CSS?

width: 100%;
height: 30% of width;

Was ich umsetzen will:
Wenn ich das verringern der Breite, die Höhe sinkt auch proportional.

Kommentar zu dem Problem
was ist das endgültige Ziel, Sie wollen accompish damit? Ich denke, Sie benötigen javascript um so etwas zu tun Kommentarautor: Onheiron

InformationsquelleAutor der Frage fedor.belov | 2012-07-18

  1. 35

    Polsterung %

    Dies kann erreicht werden, indem das element height:0 und padding-bottom:30%.

    In allen Browsern, wenn die Polsterung ist in % angegeben, es errechnet sich in relation zum übergeordneten element die Breite. Dies kann eine sehr nützliche Funktion für Responsive Design.

    JSFiddle Demo

    In der demo, der blue-box am oberen Rand der Seite ist eine einzige div. Die Höhe ist reaktionsschnell, und Sie enthalten kann, eine variable Anzahl von inline-Inhalte ohne Erhöhung der Höhe. Es getestet Geldstrafe in IE7/8/9/10, Firefox, Chrome, Safari und Opera.

    .content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
}
...
<div class="content"></div>

    Polsterung % und absolute position

    Wenn es irgendwelche Probleme mit der Verwendung einer 0-Höhe element, das demo hat auch eine grüne box implementiert, mit einem wrapper-element und absoluter position. Nicht sicher, ob es irgendwelche Vorteile dieses Ansatzes.

    .wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}
.wrapper .content {
    position: absolute;
    width: 100%;
    height: 100%;
}
...
<div class="wrapper">
    <div class="content"></div>
</div>

    InformationsquelleAutor der Antwort Matt Coughlin

  2. 8

    Dies ist nun möglich auf modernen Browsern mit vw und vh Einheiten:

    width: 100vw;
height: 30vw; /* 30% of width */

    Browser-Unterstützung: http://caniuse.com/#feat=viewport-units

    Yeah!

    InformationsquelleAutor der Antwort ndp

  3. 3

    Auch mit JQuery, die man tun könnte:

    $(window).ready(function () {
    var ratio = 3 / 10, $div = $('#my_proportional_div');
    $div.height($div.width() * ratio);
    $(window).bind('resize', function() { $div.height($div.width() * ratio); });
});

    weil die Polsterung % Lösung vorgeschlagen, funktioniert nicht mit max/min-width und max-min height.

    InformationsquelleAutor der Antwort sebnukem

Schreibe einen Kommentar