web-dev-qa-db-fra.com

Est-il possible d'utiliser CSS calc () pour calculer un rapport largeur / hauteur?

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

Il s'agit d'une image d'arrière-plan réactive centrée - le conteneur doit avoir une largeur/hauteur variable et je ne veux pas utiliser jQuery.

Propriétés connues:

Rapport: 1280: 270

Hauteur minimum: 100px

Hauteur maximale: 270 px

Largeur maximale: 1280 px

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

hauteur = calc (CURRENT_SCREEN_WIDTH * 270/1280);

Cependant mon approche actuelle

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

ne fonctionne pas encore. Existe-t-il une solution CSS?

csscss3calc
11
Blackbam

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

J'ai appliqué la solution de Blackbam à la situation où un div était placé dans le corps et le corps avait un rembourrage gauche et droit de 15px. La soustraction du rembourrage total gauche et droit (30 pixels) de la hauteur calculée a supprimé les espaces blancs apparus au-dessus et en dessous de la division.

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

Il est également possible de le faire sans calc(). padding (même -top et -bottom) sont relatifs à la largeur de l'élément, vous pouvez donc 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 <div> Intérieur à l'aide de l'astuce relative/absolue, bien que les choses commencent à mal tourner si le contenu dépasse la hauteur de contenu:

.chi_display_header {
    ...
    position: relative;
}

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