Comment obtenir les proportions en utilisant CSS

Méthode d'implémentation : 1. Utilisez l'attribut padding et l'unité "%" ; 2. Utilisez les attributs padding et calc() 3. Utilisez l'attribut padding et les variables CSS ; pseudo-éléments ; 5. Utilisez directement l'unité de fenêtre "vw" ; 6. Utilisez l'unité de fenêtre avec la disposition CSS Grid.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Aspect Ratio Story

Aspect Ratio est également appelé Aspect Ratio dans la production cinématographique et télévisuelle. rapport obtenu en divisant la largeur d'une vidéo par sa hauteur, généralement exprimé par x:y ou x×y, où les deux points et la croix signifient « rapport » en chinois. Actuellement, le plus couramment utilisé dans l'industrie cinématographique est le rapport anamorphique (c'est-à-dire 2.39:1). Le traditionnel 4:3 est encore utilisé sur de nombreux écrans de télévision aujourd'hui, et sa spécification successeur à succès 16:9 est utilisée dans la télévision haute définition ou la télévision numérique. Rapports courants :

Pour plus d'informations sur les rapports d'aspect, vous pouvez lire l'article Aspect ration sur Wiki.

Structure HTML

Utilisez CSS pour implémenter les proportions du conteneur. Il existe deux structures de modèles HTML courantes :

<div class="aspectration" data-ratio="16:9">
    <div class="content"></div>
</div>

L'autre. La structure est :

<div class="aspectration" data-ratio="16:9">
</div>

Lorsqu'elles sont utilisées spécifiquement, différentes structures doivent être utilisées en fonction de vos propres scénarios d'utilisation.

Schéma CSS pour implémenter les proportions

Comme mentionné précédemment, il existe de nombreux schémas permettant d'utiliser CSS pour obtenir des proportions. Voici une brève liste de ces schémas. Cependant, chaque solution ne sera pas présentée en détail, car le code est très simple, et vous pouvez comprendre le principe d'un simple coup d'œil sur le code.

Rembourrage dans le sens vertical

Il s'agit de l'une des premières solutions de mise en œuvre proposées. Le principe principal est d'utiliser la valeur en pourcentage de padding-top ou padding-bottom pour obtenir le rapport hauteur/largeur du conteneur. . La valeur en pourcentage de padding-top ou padding-bottom en CSS est calculée en fonction du width du conteneur. De cette manière, le rapport hauteur/largeur du conteneur est bien obtenu. Pour utiliser cette méthode, vous devez définir le height du conteneur sur 0. Tous les éléments du contenu du conteneur doivent utiliser position:absolute, sinon le contenu des sous-éléments sera expulsé du conteneur par padding (provoquant un débordement du contenu).

Par exemple, le rapport hauteur/largeur de notre conteneur est 16:9, alors selon le calcul : 100% * 9 / 16 peut obtenir 56.25%. Si vous voulez 4:3, alors celui correspondant est 100% * 3 / 4.

Le code CSS spécifique est le suivant :

.aspectration {
    position: relative; /*因为容器所有子元素需要绝对定位*/
    height: 0; /*容器高度是由padding来控制，盒模型原理告诉你一切*/
    width: 100%; 
}

.aspectration[data-ratio="16:9"] {
    padding-top: 56.25%;
}

.aspectration[data-ratio="4:3"]{
    padding-top: 75%;
}

Utilisez le sélecteur générique * pour que la largeur et la hauteur de ses éléments enfants aient la même taille que le conteneur .aspectration :

.aspectration > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

padding & calc()

Cette solution utilise padding et calc() pour être utilisés ensemble. En fait, le principe est le même que la première solution. Cependant, dans la première solution, nous devons calculer la valeur de padding à chaque fois. Si nous utilisons calc(), nous pouvons calculer directement la valeur en pourcentage de padding via le navigateur.

.aspectration[data-ratio="16:9"] {
    padding-top: calc(100% * 9 / 16);
}

padding & variables CSS

Pour les variables, c'était autrefois une fonctionnalité d'autres langages de calculatrice et processeurs CSS, mais ce qui mérite d'être mentionné, c'est que c'est désormais également une fonctionnalité de CSS. La solution suivante est également basée sur le principe padding, mais elle utilise la fonctionnalité de variable CSS pour rendre la solution précédente plus flexible. Lorsque vous utilisez des variables CSS, vous pouvez supprimer data-ratio en HTML. Remplacez-le par style="--aspect-ratio:16/9", ou style="--aspect-ratio:1.4;". En parallèle, vous pouvez également utiliser calc() dans la deuxième solution. Parce que la combinaison des variables CSS et de la fonction calc() est une combinaison parfaite.

.aspectration[style*="--aspect-ratio"] {
    padding-top: calc(100% / (var(--aspect-ratio)));
}

padding & pseudo-element

Les solutions précédentes utilisent toutes la valeur .aspectration sur l'élément padding. Mais en CSS, vous pouvez aussi utiliser des pseudo-éléments CSS ::before ou ::after pour ouvrir le conteneur.

.aspectration {
    position: relative;
}

.aspectration:after {
    content: "";
    display: block;
    width: 1px;
    margin-left: -1px;
    background-color: orange;
}

.aspectration[data-ratio="16:9"]:after {
    padding-top: 56.25%;
}

.content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Unité de fenêtre

Une nouvelle unité vw est fournie dans les nouvelles fonctionnalités CSS. Les étudiants qui ont découvert cette unité savent que le navigateur 100vw représente la largeur de la fenêtre du navigateur (Viewport). Par exemple, si votre navigateur est 1334px, alors 100vw = 1334px est correct. Cette fois, cela signifie 1vw = 13.34px. Le 100vw ici correspond également au 100% dans la solution précédente. De cette façon, nous pouvons remplacer l'unité % précédente par l'unité de vw. Par exemple, 16:9 correspond à 100vw * 9 / 16 = 56.25vw. Cette valeur peut être utilisée en padding-top ou padding-bottom. Mais ce qui est démontré ici n'est plus padding, mais donner cette valeur à height.

.aspectration[data-ratio="16:9"] {
    width: 100vw;
    height: 56.25vw;
}

上面的示例中width的值是30vw,那么对应的height值就是30vw * 9 / 16 = 16.875vw。

视窗单位 & CSS Grid

这是一个很有创意的解决方案，使用的都是CSS新特性：视窗单位和CSS Grid Layout。简单说一下其中的实现原理：将容器.aspectration通过display:grid声明为一个网格容器，并且利用repeat()将容器划分为横向比例，比如16，那么每一格的宽度对应的就是100vw * 9 / 16 = 6.25vw。同样使用grid-auto-rows，将其设置的值和横向的值一样。在子元素上通过grid-column和grid-row按比例合并单元格。

.aspectration {
    display: grid;
    grid-template-columns: repeat(16, 6.25vw);
    grid-auto-rows: 6.25vw;
}

.aspectration[data-ratio="16:9"] .content {
    grid-column: span 16;
    grid-row: span 9;
}

（学习视频分享：css视频教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!