Discussion :

[Rpi78]

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.

[rodolphebrd]

Bonjour,

En essayant cela:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
img {
  width:100%;
  height:100%;
  display:block;
}

[Rpi78]

Bonjour,

j'ai testé le bloc css mais le problème est toujours présent.

[Candygirl]

Je souhaite que l'image soit redimensionné à la taille de la div afin d'afficher l'image dans son intégralité dans la div.

Tu veux donc que l'image soit déformée vu qu'il y très peu de chance que le ratio de ton div en % soit le même que celui de l'image ?

[Rpi78]

Bonjour Candygirl,

non je ne veux pas que l'image soit déformée. Il y a donc trois solutions :

1. prendre une image proportionnelle à la div (peu probable vu que la div est en fonction de la fenêtre, qui est elle même différente selon les utilisateurs)
2. prendre une image carré et une div carré
3. adapter une seul dimension de l'image, la plus grande (la longueur ou la largeur)

[rodolphebrd]

En testant je ne vois pas de problème car l'image se déforme pour épouser la totalité du conteneur: codepen

Edit: je viens de voir qu'il ne faut pas que l'image soit déformée :/

Sinon il faudra passer par Photoshop...

[Candygirl]

Concernant ton point 3 c'est réalisable en mettant ton image comme background, à l'aide de la propriété css 3 background-size.

[nicosmash]

Bonjour,

Vous pouvez essayer avec en plus du : width et height : max-width et max-height.

Cf :
max-width :
http://www.w3schools.com/cssref/pr_dim_max-width.asp
max-height :
http://www.w3schools.com/cssref/pr_dim_max-height.asp

Bien cordialement.

[Invité]

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

Il semble que l'image soit redimensionnée APRES affichage.

Dans ce cas, il faudrait voir du coté de JavaScript/jQuery !