Comment puis-je conserver les proportions des éléments en utilisant uniquement CSS ?

Préserver les proportions des éléments avec CSS : largeur minimale à partir de la hauteur

Définir la largeur minimale des éléments en fonction de leur hauteur peut être un défi lorsque la hauteur n'est pas explicitement définie. Bien que l'utilisation de jQuery offre une solution, il est possible d'obtenir ce comportement directement en CSS.

Pour préserver les proportions, exploitez le concept « d'élément remplacé ». Une image () en est un excellent exemple. En définissant sa hauteur, le rapport hauteur/largeur intrinsèque est conservé, ajustant automatiquement la largeur en conséquence.

Mise en œuvre de la solution CSS

Créez un "conteneur" avec un arbitraire souhaité saisissez la hauteur et définissez sa position sur "relative". À l'intérieur du conteneur, ajoutez une image d'une hauteur de 100 %. Cela définit automatiquement la largeur de l'image proportionnellement.

Imbriquer un élément "contenu" avec un positionnement absolu pour occuper tout l'espace du conteneur sans influencer ses dimensions.

Contrôle du rapport d'aspect

Pour ajuster le rapport hauteur/largeur, faites varier la hauteur de l'image. Par exemple, un rapport 4:3 nécessite de régler la hauteur de l'image à 133 %.

Considérations supplémentaires

Le gif transparent 1x1 px utilisé dans la solution peut être remplacé par d'autres éléments, comme un canevas ou un SVG. Si l'image d'origine n'a pas un rapport hauteur/largeur de 1:1, les valeurs de hauteur devront être ajustées.

Pour définir la hauteur de l'élément en fonction de la largeur, reportez-vous à « Maintenir le rapport hauteur/largeur d'une division avec CSS ». ressource.

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!