Librairie pour image "Responsive" auto-redimensionnée sur son contenant

Bonjour,

J'essaye de me choper une librairie qui me permettrait que mes images se redimensionnent automatiquement en fonction de la taille de leur contenant.

J'ai bien vu les tags HTML5 "picture" ou des librairies comme jQuery.picture, mais tout ne redimensionne pas l'image et ne fait "que" sélectionner la bonne version de l'image en fonction de la taille du contenant. Et je n'ai pas l'intention de faire plusieurs version de chaque image automatiquement avec un back-end php et d'utiliser jQuery.picture pour sélectionner la bonne version.

J'ai une version de chaque image et elle doit se redimensionner à chaque fois que le contenant change de taille.

Ca existe, ou je vais devoir le coder moi-même :cry: ?

merci,

Comme ça tout de suite, je pense à drawImage de canvas.

Code:

---

1 2	// x/y : coordonnée x/y sur le canvas et width/heigt la taille du canvas drawImage(image, x, y, width, height)

---

Sujet intéressant peut-être : http://www.developpez.net/forums/d11...ia-javascript/

Ce que je comprends pas c'est pourquoi la balise <img> ne convient pas ? Elle se redimensionne parfaitement...
Oui, ça déforme l'image, mais en même temps c'est un peu normal pour une image qui change de taille.

http://jquerypicture.com/

Citation:

---

Envoyé par Kaamo

Comme ça tout de suite, je pense à drawImage de canvas.

Code:

---

1 2	// x/y : coordonnée x/y sur le canvas et width/heigt la taille du canvas drawImage(image, x, y, width, height)

---

Sujet intéressant peut-être : http://www.developpez.net/forums/d11...ia-javascript/

---

Effectivement. Merci pour le lien.

jQuery.picture ne redimensionne pas l'image mais choisit l'image adhoc en fonction de la taille du contenant. Sauf si j'ai pas bien compris !

Citation:

---

jQuery.picture ne redimensionne pas l'image mais choisit l'image adhoc en fonction de la taille du contenant. Sauf si j'ai pas bien compris !

---

Oui ce qui est la meilleur façon d'afficher des images poru d'eun part ne pas les déformer ou pixelliser et d'autre part utiliser de façon correcte et circonstanciée la bande passante

Citation:

---

J'essaye de me choper une librairie qui me permettrait que mes images se redimensionnent automatiquement en fonction de la taille de leur contenant.

---

Pas besoin de librairie pour ça !

Code:

---

1 2 3 4

#container > img { width: 100%; }

---

:ccool:

En revanche le problème se pose pour les éléments textuels qui dépendent de font-size. Dans ce cas je te recommande http://fittextjs.com/

Citation:

---

Envoyé par SylvainPV

Code:

---

1 2 3 4

#container > img { width: 100%; }

---

---

C'était si simple !!!!! Merci.

Au fait, en javascript est-il possible de connaître les dimensions de l'image d'origine ? (donc pas sa taille affichée ?)

En HTML5, naturalHeight et naturalWidth. Si le navigateur ne gère pas, passer les styles height et width à auto, ce qui lui donne donc sa taille naturelle, vérifier les propriétés height et width, puis une fois que c'est fait, remettre les styles à la taille voulue.
(Il existe aussi des méthodes plus directes pour chaque navigateur, mais bon.)