Comment définir la hauteur et la largeur d'un élément pour qu'elles soient identiques en CSS

CSS (Cascading Style Sheets) est un langage utilisé pour créer et concevoir des pages Web. Dans la conception Web, il est souvent nécessaire de définir la largeur et la hauteur des éléments. Ces propriétés sont très courantes en CSS. Cependant, il est parfois nécessaire de définir la hauteur et la largeur d'un élément de manière égale, ce qui peut prêter à confusion pour les débutants. Cet article présentera plusieurs méthodes pour définir la hauteur d'un élément égale à sa largeur.

La première méthode : utilisez la technique padding-top

Cette méthode utilise l'attribut padding-top pour rendre la hauteur du contenu de l'élément égale à la largeur. Dans cette technique, la propriété padding-top, qui représente une valeur en pourcentage, est définie comme étant égale à la largeur de l'élément. Par exemple, si la largeur de l'élément est de 100 px, la valeur de l'attribut padding-top doit être de 100 %.

L'avantage de l'utilisation de cette technique est que le contenu de l'élément peut être ajusté de manière flexible à n'importe quelle taille, et l'attribut box-sizing peut également être utilisé pour déterminer le type de modèle de boîte de l'élément. La limitation de cette technique est que l'attribut padding-top augmente le remplissage en haut de l'élément, ce qui peut affecter la disposition des autres éléments.

Voici un exemple :

<div class="square"></div>

.square {
    width: 100px;
    padding-top: 100%;
    background-color: red;
    box-sizing: border-box; /* 可选，根据需要来决定盒模型 */
}

Dans l'exemple ci-dessus, un élément div carré d'une largeur de 100 px est défini, avec l'attribut padding-top défini sur 100 %. Lorsque la largeur est de 100 px, la valeur de padding-top est également de 100 px, ce qui rend la hauteur de l'élément div égale à la largeur, créant ainsi un carré.

Deuxième méthode : Utiliser des pseudo-éléments

La deuxième méthode utilise des pseudo-éléments en CSS pour convertir un élément vide en carré. Dans cette technique, vous créez un élément vide basé sur l'attribut padding-top via le pseudo-élément ::before ou ::after, puis définissez la largeur et la hauteur de l'élément sur des valeurs égales.

Voici un exemple :

<div class="square"></div>

.square {
    position: relative;
    width: 100px;
    height: 0;
    padding-top: 100%;
    background-color: red;
}

.square::before {
    content: "";
    display: block;
    padding-top: inherit;
}

Dans l'exemple ci-dessus, définissez un élément div avec une largeur de 100px et définissez l'attribut padding-top sur 100%, de sorte que la hauteur de l'élément div soit égale à la largeur. Un élément vide de niveau bloc est créé à l'aide du pseudo-élément ::before, et la hauteur de cet élément est également définie sur 100 %. Utilisez padding-top pour hériter de la valeur de l'élément div ci-dessus afin que la hauteur et la largeur de l'élément vide au niveau du bloc soient égales.

Troisième méthode : utiliser des unités de fenêtre

La troisième méthode peut utiliser des unités de fenêtre pour créer des éléments carrés. Les unités de fenêtre sont une unité relative à la largeur ou à la hauteur de la fenêtre. Utilisez les unités vw et vh pour déterminer un certain rapport entre la largeur et la hauteur de l'écran.

Voici un exemple :

<div class="square"></div>

.square {
    width: 50vw;
    height: 50vw;
    background-color: red;
}

Dans l'exemple ci-dessus, un élément div d'une largeur de 50vw (la moitié de la largeur de la fenêtre) est défini, et la hauteur est également définie sur 50vw, créant ainsi un élément carré.

Résumé

Dans la conception de sites Web, il est souvent nécessaire de définir la hauteur et la largeur des éléments. Vous pouvez y parvenir facilement en utilisant CSS, et vous pouvez également utiliser l'une des trois techniques ci-dessus pour définir la hauteur d'un élément pour qu'elle soit égale à sa largeur. Utilisez la technique du padding-top pour contrôler de manière flexible le contenu de l'élément, utilisez des pseudo-éléments pour créer un élément carré vide et utilisez des unités de fenêtre pour déterminer le rapport largeur/hauteur de l'élément. Vous pouvez choisir la méthode appropriée en fonction de la situation spécifique.

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!