Ist es möglich mit CSS calc() zur Berechnung einer Breite/Höhe-Verhältnis?

Dies ist der code, die ich derzeit habe (es funktioniert noch nicht):

HTML:

<div class="chi_display_header" style="background-image:url('http://localhost/.../header-dummy-small.png');"></div>

CSS:

.chi_display_header {
    background-size:contain;
    width:100%;
    min-height:100px;
    height:calc(1vw * 270 / 1280px);
    max-height:270px;
    max-width:1280px;
    margin:0 auto;
}

Dies ist eine zentrierte ansprechende hintergrund - sollte der Behälter haben eine variable Breite /Höhe und das will ich nicht, um jQuery verwenden.

Bekannten Eigenschaften:

Verhältnis: 1280:270

Minimale Höhe: 100px

Maximale Höhe: 270px

Maximale Breite: 1280px

Was ich versuche zu tun, ist zu berechnen, die container-Höhe .chi_display_header magisch mit calc:

height = calc( CURRENT_SCREEN_WIDTH * 270 /1280);

Aber mein Aktueller Ansatz

height:calc(1vw * 270 / 1280px);

funktioniert noch nicht. Gibt es eine CSS-Lösung?

  • Verwandte: stackoverflow.com/questions/1495407/...
  • 100vw ist vollbreite, nicht 1vw
  • gibt es eine Lösung mit calc?
  • richtig..... vielleicht wirkt es fast mit diesem, es ist ein bisschen geschnitten mit background-size: cover-es funktioniert mit dem abschneiden ein wenig
InformationsquelleAutor Blackbam | 2016-05-04
  1. 11

    Lösung (ty 4 Kommentare):

    .chi_display_header {
    background-size:cover;
    width:100%;
    min-height:100px;
    height:calc(100vw * 270.0 / 1280.0);
    max-height:270px;
    max-width:1280px;
    margin:0 auto;
}
    InformationsquelleAutor Blackbam
  2. 3

    Bewarb ich mich Blackbam, der die Lösung für die situation, wo ein div gelegt wurde, in den Körper und der Körper hatte Links und rechts padding von 15px. Die Subtraktion der Summe Links und rechts-Polsterung (30px) von der berechneten Höhe entfernt white-space erschienen, die oberhalb und unterhalb der div.

    height:calc(100vw * aspect_ratio - 30px);
    InformationsquelleAutor LJaeren
  3. 1

    Ist es möglich, dies zu tun, ohne calc() als gut. padding (auch -top und -bottom) relativ zu dem element die Breite, so können Sie den gleichen Effekt so:

    .chi_display_header {
    background-size: cover;
    width: 100%;
    min-width: 474px;
    max-width: 1280px;
    height: 0;
    padding-bottom: 21.09375%;
}

    Können Sie auch Elemente im inneren mit einer inneren <div> mit der relativen/absoluten trick, wenn die Dinge beginnen schief zu gehen, wenn der Inhalt übersteigt die mit Höhe:

    .chi_display_header {
    ...
    position: relative;
}

.chi_display_header .inner {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 15px;
}
    InformationsquelleAutor rgchris
Schreibe einen Kommentar