En HTML, comment redimensionner dynamiquement une image ?
Il est possible de redimensionner dynamiquement une image grâce à la propriété CSS width:100%.
<!-- Resizing to parent entity width -->
<img src="https://ans.wiki/images/logo/logo-answiki-medium.png" style="max-width:100%;">
Notons que cette propriété ajustera l'image à la largeur de l'élément parent. Si ce dernier fait la largeur de la fenêtre, ou si l'image n'est pas inclue dans d'autres éléments, alors elle prendra la largeur de la fenêtre.
Si l'on souhaite que la largeur de l'image soit à la largeur de l'élément parent sans jamais dépasser la largeur native de l'image. Il convient d'utiliser la propriété CSS max-width:100% :
<!-- Resizing to parent entity width or image width-->
<img src="https://ans.wiki/images/logo/logo-answiki-medium.png" style="width:100%;">
Les exemples ci-dessus peuvent être testés en ligne en cliquant ici.
Il est également possible d'imposer la même contrainte en jouant avec les propriétés suivantes :
- min-width : largeur minimum
- height : hauteur imposée
- max-height : hauteur maximale
- min-height : hauteur minimale
Il est possible de redimensionner dynamiquement une image grâce à la propriété CSS width:100%.
<!-- Resizing to parent entity width -->
<img src="https://ans.wiki/images/logo/logo-answiki-medium.png" style="max-width:100%;">
Notons que cette propriété ajustera l'image à la largeur de l'élément parent. Si ce dernier fait la largeur de la fenêtre, ou si l'image n'est pas inclue dans d'autres éléments, alors elle prendra la largeur de la fenêtre.
Si l'on souhaite que la largeur de l'image soit à la largeur de l'élément parent sans jamais dépasser la largeur native de l'image. Il convient d'utiliser la propriété CSS max-width:100% :
<!-- Resizing to parent entity width or image width-->
<img src="https://ans.wiki/images/logo/logo-answiki-medium.png" style="width:100%;">
Les exemples ci-dessus peuvent être testés en ligne en cliquant ici.
Il est également possible d'imposer la même contrainte en jouant avec les propriétés suivantes :
- min-width : largeur minimum
- height : hauteur imposée
- max-height : hauteur maximale
- min-height : hauteur minimale
| # | ID | Query | URL | Count |
|---|