5545 sujets

Sémantique web et HTML

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... Smiley ohwell
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)
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.
Ç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>.
Salut

sinon tu peux tenter d'utiliser ton image comme arrière plan de ton conteneur.

background:url(tonimage) no-repeat center center;
background-size:cover;

par contre si ton image d'arrière-plan fait 1920x1080 dans un conteneur de 256x256, ça va pas donner grand chose.
Sujet clos
Aller à