recadrer image

[invite9689f6d6]

Bonjour,

je voudrais recadrer des images aux tailles variées, de maniere a ce qu'elle fassent 150x150 px.

Le tout soit en html/css (le plus préférable) soit en php.

Par avance merci.

Raphaël
-----

[invite936c567e]

Bonjour

Peux-tu préciser ce que tu entends par « recadrer » ? S'agit-il d'afficher une partie d'une image, ou bien de générer un fichier ne contenant que cette partie ?

[invite9689f6d6]

non, ce serait plustot redimensionner cette image dans un div de 150x150; telle que la largeur touche les 2 cotés et que la hauteur soit proportionnelle a la largeur.

Je voudrais aussi que cette image soit centrée sur la verticale.

[invite936c567e]

« Recadrer » signifie découper. « Redimensionner » signifie changer d'échelle.

Et si l'image est plus haute que large, on fait quoi ?

[A voir en vidéo sur Futura]

[invite9689f6d6]

rien, peut importe

[invite936c567e]

Par exemple, on peut d'une part définir les styles :

img.c150 {
  width:    150px;
}
div.c150 {
  height:   150px;
  overflow: hidden;
  position: relative; 
  clip:     rect( 0px, 0px, 150px, 150px );
}

et dans le document, insérer les images sous la forme :

<div class="c150"><img class="c150" src= ...  /></div>

Dans ce cas de figure, l'image est remise à l'échelle pour tenir sur 150 pixels dans la largeur, et le bas est découpé si elle est trop haute.

[invite936c567e]

Oups... j'ai oublié de centrer l'image verticalement. Pour les styles, ça donne donc :

img.c150 {
  width:    150px;
  position: absolute;
  top:      0;
  bottom:   0;
  margin:   auto;
}
div.c150 {
  height:   150px;
  overflow: hidden;
  position: relative; 
  clip:     rect( 0px, 0px, 150px, 150px );
}

[inviteeca591d5]

<img src="..." alt="..." width="150px" height="150px" /> tout simplement

[invite936c567e]

<img src="..." alt="..." width="150px" height="150px" /> tout simplement

Cette façon de procéder déforme l'image en modifiant le ratio des échelles horizontale/verticale. Par exemple, une image 16:9 va se retrouver allongée dans le sens de la hauteur.

[invited9b9018b]

Juste une précision au cas où (si l'auteur du topic revient) : si les images sont grandes à l'origine, il est préférable de les miniaturiser côté serveur (pas la peine de télécharger une image de 1280x960 pour afficher 150x150 maxi)

A+,