Bonjour,

Je vais chercher des images via une api sur un site distant, elles font toutes 250px de large sans exception. Selon l'orientation elles font plus ou moins de 250 en hauteur.

Pour l'esthétique j'aimerai les placer dans des div carrés 250X250, et selon la hauteur il faudrait:

Si la hauteur est inférieure à 250: Zoomer pour mettre la hauteur à 250 et centrer l'image horizontalement (donc dépassement invisible à gauche et à droite)
Si la hauteur est supérieure à 250: Juste centrer l'image verticalement (donc dépassement invisible en haut et en bas)

Au niveau de la détection de la taille etc... c'est php qui s'en charge. La ou je coince, c'est comment mettre ça en place au niveau css...

Après recherche, je tombe sur plusieurs possibilités

1 Marges négatives
2 La propriété CSS clip
3 La position absolue
4 L'image en backround dans un div

La plus simple c'est l'image en background, même pas besoin de de se tracasser de la taille de l'image, la propriété fait tout le centrage horizontal ou vertical tout seul. Mais j'ai entendu dire que niveau référencement ce n'était pas l'idéal puisqu'on perd le "alt" de la balise <img>.

Les trois autres demandent beaucoup plus de travail. Niveau php, il faut récupérer la hauteur, tester l'orientation, et définir les différentes coordonnées pour décaler l'image en fonction du résultat voulu. Ce qui m'obligera à afficher le css dans chaque balise (img style="").

Selon vous ? Avez vous des conseil à me fournir ? Voire une solution alternative ?

Merci.