Discussion :

[lvr]

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 ?

merci,

[Kaamo]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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/

[thelvin]

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.

[SpaceFrog]

http://jquerypicture.com/

[lvr]

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[SpaceFrog]

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

[SylvainPV]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#container > img {
    width: 100%;
}

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/

[lvr]

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#container > img {
    width: 100%;
}

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