Adapter une image au dimension d'une div

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:

---

1 2 3

<div id="id_div"> <img src="images/image.png"> </div>

---

Voici le code CSS correspondant :

Code:

---

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.

Bonjour,

En essayant cela:

Code:

---

1 2 3 4 5

img { width:100%; height:100%; display:block; }

---

Bonjour,

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

Citation:

---

Envoyé par Rpi78

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 ?

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)

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...

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

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.

Bonjour,

Le code CSS cité dans le 1er message NE correspond PAS au comportement indiqué :

Citation:

---

Avec le code ci-dessous, l'image est coupé au dimension de la div

---

:fleche: Le comportement cité correspond à UNE IMAGE EN BACKGROUND :

Code:

---

1 2	<div id="id_div"> </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10

#id_div{ display:block; float:left; border-style: solid; border-color: grey; width:49%; height:49%; background:url(images/image.png); background-size:100% auto; /* ADAPTATION de l'image au conteneur */ }

---

SI l'image est effectivement "en dur" (comme cité), le CSS est correct. Il faut alors chercher le problème ailleurs (dans une autre partie du CSS ???)

Ce qui pourrait expliquer le comportement serait :

Code:

---

1 2 3

<div id="id_div"> <img src="images/image.png"> </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

#id_div{ position:relative; /* absolute */ display:block; float:left; border-style: solid; border-color: grey; width:49%; height:49%; overflow:hidden; /* hidden*/ } img { position:absolute; /* absolute */ }

---

Citation:

---

Envoyé par Rpi78

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 !