Comment atteindre 100 % de largeur ou de hauteur tout en conservant les proportions en CSS ?

Atteindre une largeur ou une hauteur de 100 % tout en conservant les proportions en CSS

En CSS, définir la largeur : 100 % et laisser la hauteur définie sur auto (ou vice versa) est souvent utilisé pour contraindre une image. Cependant, cela peut entraîner une image disproportionnée en largeur ou en hauteur.

Pour conserver les proportions tout en contraignant l'image, envisagez les approches suivantes :

Contraindre et recadrer à l'aide d'un DIV :

Imbriquer l'image dans un DIV et définir sa largeur maximale, sa hauteur maximale et son débordement : caché. Cela empêchera l'image de dépasser les dimensions spécifiées et recadrera tout excès.

Préserver les proportions et limiter les dimensions maximales :

Utiliser la largeur et la hauteur maximales. propriétés sans spécifier de dimensions minimales. Cela permet à l'image de conserver son rapport hauteur/largeur tout en garantissant qu'elle ne dépasse pas les dimensions maximales spécifiées.

Exemple de code :

<code class="css">.image-container {
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
}</code>

Ce code garantit que l'image dans le conteneur .image ne dépassera pas 500 pixels en largeur ou en hauteur tout en conservant son rapport hauteur/largeur d'origine.

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!