Comment adapter la taille d'une image HTML à celle de son contenant ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-03-07 11:06:37

Question

Bonjour, j'ai une image HTML qui fait 250px par 250px. J'aimerais pouvoir adapter de manière automatique la taille de l'image, selon qu'elle soit affichée dans un <div> plus grand, ou plus petit, que l'image elle-même, merci.

Réponse

Pour adapter la taille d'une image HTML à celle de son contenant, vous pouvez utiliser les propriétés CSS width pour définir la largeur de l'image, et object-fit, avec la valeur contain, pour que l'image conserve ses proportions.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment adapter la taille d'une image HTML à celle de son contenant ?</title>
<style>
.contenant { 
width:100px;
} 
.image { 
width:100%; 
height:auto;  
object-fit: contain; 
} 
</style> 
</head>
<body>
<div class="contenant">    
<img src="https://www.collaborativejob.com/os.jpg" class="image" alt="1FORMATIK.com">
</div> 
</body>
</html>