Comment puis-je définir la largeur d'un élément proportionnellement à sa hauteur à l'aide de CSS ?

Ajustement de la largeur des éléments en fonction de la hauteur à l'aide de CSS

La définition de la largeur des éléments en fonction de la hauteur peut être obtenue via jQuery, comme mentionné dans la question d'origine. Cependant, ce processus peut être rationalisé à l'aide de CSS.

Pour ce faire, exploitez le concept d'éléments remplacés tels que . Ces éléments ajustent intrinsèquement leur largeur pour conserver leurs proportions lorsque seule la hauteur est spécifiée.

Considérons l'exemple suivant :

.container {
  position: relative;
  display: inline-block;
  height: 50vh;
}

.container > img {
  height: 100%;
}

.contents {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

La hauteur de l'élément .container détermine la largeur minimale. Le transparent avec un rapport hauteur/largeur de 1:1 garantit que la largeur de .container et de son élément enfant .contents est toujours proportionnelle à sa hauteur.

Alternativement, pour conserver un rapport hauteur/largeur de 4:3 pour .contents, définissez le format d'image de l'img. hauteur à 133%. À l'aide d'un ou est également réalisable.

Pour les situations où la hauteur de l'élément doit être ajustée en fonction de la largeur, reportez-vous au guide sur le maintien des proportions à l'aide de 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!