Comment puis-je m'assurer qu'une image ne dépasse pas une taille spécifique tout en conservant ses proportions lors de l'utilisation d'une largeur ou d'une hauteur de 100 % en CSS ?

Établissement de contraintes de rapport d'aspect pour une largeur ou une hauteur de 100 % en CSS

En CSS, l'attribution d'une largeur ou d'une hauteur de 100 % à une image préserve le rapport d'aspect mais peut entraîner dans l'image étant trop grande ou trop petite pour la position souhaitée.

Une solution potentielle consiste à placer l'image dans un DIV et à appliquer overflow:hidden pour recadrer tout excès. Cependant, cela ne fera que limiter la taille de l'image et n'affectera pas son rapport hauteur/largeur.

Si la préservation du rapport hauteur/largeur n'est pas nécessaire, la définition des propriétés max-width et max-height sur l'image peut garantir qu'elle ne le fera pas. Ne dépassez pas une taille spécifique tout en préservant les proportions. En définissant ces dimensions maximales, l'image sera redimensionnée en conséquence pour s'adapter aux limites spécifiées.

Par exemple :

<code class="css">img {
  max-width: 200px;
  max-height: 150px;
}</code>

Avec cette approche, l'image ne s'agrandira pas de plus de 200 px de largeur. ou 150px de hauteur, tout en conservant son rapport hauteur/largeur.

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!