Est-il possible d'utiliser les CSS calc() afin de calculer un ratio hauteur/largeur?

C'est le code que j'ai actuellement (il ne fonctionne pas encore):

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;
}

C'est centrée sensible de l'image de fond - le conteneur doit avoir une variable largeur /hauteur et je ne veux pas utiliser jQuery.

Propriétés connues:

Ratio: 1280:270

Hauteur minimale: 100px

Hauteur maximale: 270px

Maximum width: 1280px

Ce que j'essaie de faire est de calculer la hauteur du conteneur .chi_display_header magie avec calc:

hauteur = calc( CURRENT_SCREEN_WIDTH * 270 /1280);

Cependant, mon approche actuelle

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

ne fonctionne pas encore. Est-il un CSS solution?

Connexes: stackoverflow.com/questions/1495407/...
100vw est fullwidth, pas 1vw
est-il une solution avec calc?
droit..... peut-être que cela semble fonctionner presque à cela, il est un peu coupé avec background-size: cover elle fonctionne avec une coupe un peu

OriginalL'auteur Blackbam | 2016-05-04

  1. 10

    Solution (ty 4 commentaires):

    .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;
}

    OriginalL'auteur Blackbam

  2. 3

    J'ai appliqué Blackbam solution à la situation où une div qui a été placé dans le corps et le corps était de gauche et de droite rembourrage de 15px. En soustrayant le total à gauche et à droite de rembourrage (30px) à partir de la taille calculée retirée de l'espace vide qui est apparu au-dessus et en dessous de la div.

    height:calc(100vw * aspect_ratio - 30px);

    OriginalL'auteur LJaeren

  3. 1

    Il est possible de le faire sans calc(). padding (même -top et -bottom) sont par rapport à la largeur de l'élément, de sorte que vous pouvez obtenir le même effet ainsi:

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

    Vous pouvez également ajouter des éléments à l'intérieur avec un intérieur <div> à l'aide de la relative/absolue truc, si les choses commencent à aller mal si le contenu dépasse la hauteur:

    .chi_display_header {
    ...
    position: relative;
}

.chi_display_header .inner {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 15px;
}

    OriginalL'auteur rgchris