Bonjour,

il s'agit d'un problème récurrent chez de nombreux utilisateurs mais malgré les différentes solutions que j'ai trouvé, aucune ne semble fonctionner.

Je souhaite afficher une image dans une div :
  • La div est de dimension fixe, en fonction de ma page.
  • L'image est de taille plus grande que la div.


Avec le code ci-dessous, l'image est coupé au dimension de la div (on perd donc une partie de l'image). Je souhaite que l'image soit redimensionné à la taille de la div afin d'afficher l'image dans son intégralité dans la div.

Voici le code HTML de la div et de l'image (simplifié) :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<div id="id_div">
   <img src="images/image.png">
</div>

Voici le code CSS correspondant :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
#id_div{
	display:block;
	float:left;
	border-style: solid;
	border-color: grey;
	width:49%;
	height:49%;
}
 
img {
	max-width:100%;
	max-height:100%;
}

Si quelqu'un a la solution, je suis fortement intéressé. Merci d'avance.

Remarques : lorsque j'actualise la page, durant une fraction de seconde, l'image est correctement affiché dans la div.