Recadrer image en fonction d'une DIV [résolu]

Bonjour,

Alors voilà, j'ai une DIV d'une hauteur de 256px et d'une largeur de 256px. Cette DIV peut accueillir plusieurs images de tailles divers et variés qui sont stockées dans une base de donnée. Ma question est, comment faire pour que l'image se recadre en fonction de la DIV ?

C'est à dire qu'une image vertical se retrouve avec une hauteur de 256px et une horizontale avec une largeur de 256px ?

Help ^^'

Merci d'avance =D
Modifié par Clift (28 Apr 2015 - 14:17)

ta div fait cette taille ok.

il te faudrait, c'est peut etre pas la meilleur solution, une balise <img> avec du width/heigh a 100% dans cette div. et ton image tu l'insère dans la balise <img>


exemple : https://jsfiddle.net/L5yx3xaj/
Modifié par JENCAL (28 Apr 2015 - 11:08)

J'avais essayé cette solution, mais le résultat devient un carré, ce qui déforme la majorité de mes images...

forcement.... 256x256 sur image de type 1900*1200 , cela va la déformer.

a moins que ton image soit totalement carré... cela sera déformé.. a ce niveau y'a pas de solutions miracles ^^


quand tu demande a un rectangle de devenir un carré.. tout en gardant la totalité du contenu.. bah ça compresse.
Modifié par JENCAL (28 Apr 2015 - 11:21)

Y'a pas moyen que la largeur (ou la hauteur) s'adapte en fonction de l'autre ?

salut,
si tu sais que l'image sera toujours plus large que haute, tu peux mettre un "height:100%" et un "width:auto". Il y a la propriété "background" qui gère ça mais tu perdras ta sémantique.

justement, elles ne sont pas forcément plus hautes que larges...

Si tu reprend ce lien : https://jsfiddle.net/L5yx3xaj/1/

tu applique uniquement un width 100% cela permet a l'image de "s'adapter".

Arf, j'avais pas vu

Merci beaucoup ça marche !!!!

Ça revient un peu au même mais si tu mets un "width:100%" avec un "heigh:auto" et que l'image est plus large que haute, elle ne rempliera pas toute ta <div>.

question : Si tu ne met rien, le heigh:auto est pas par défault ??