Affichage d'un certain pourcentage d'image

[SnipX]

Bonjour,

je recherche en vain depuis 2 jours comment afficher un certain pourcentage d'une image.

Exemple :

j'ai une image qui fait 100px de largeur, et 5px de haut; je ne veux afficher que les 20 premiers % de largeur (soit 20px).

Si je met width='$mavariable'% ou width='$mavariable'px, cela ne fonctionne pas, car il va m'afficher toute l'image mais en plus petit.

Merci d'avance de vos réponses, en espèrant avoir été assez clair.

[LukeSkyPator]

Faudrait utiliser un script de manipulation d'images...

Sinon, une solution pourrait être d'intégrer ton image en background d'un div. Tu ajoutes alors une image dans ton div de la couleur du fond et de la taille de l'image à recouvrir, tu l'alignes à gauche ou à droite en fonction de tes besoins et tu règles la largeur de ton div à 80%. L'image viendra masquer le background. C'est du bricolage, mais ça respecte les normes et ça t'évite de devoir segmenter un byte array.

LSP, le manchot bourrin

[SnipX]

Merci beaucoup pour la réponse rapide, je vais essayer ça alors!

Si d'autres ont d'autres idées je vous écoute :).

[Quarky]

Si tu appliques le width sur l'image, il est tout à fait normal qu'elle soit redimensionnée comme tu le décris

Donc pour réaliser ce que tu souhaites, plus simple que ce qui a été proposé : tu mets ton image dans un span (par exemple) que tu dimensionne à la taille que tu souhaites pour l'image.

Comme tu ne veux que la première partie à gauche, cela fonctionnera par défaut.

HTML

... 
<span id="customImage">
	 <img src="CHEMIN" alt="DESCRIPTION" />
</span> 
...

CSS :

#customImage {
  width : 20px;
}

Par contre ça marche en indiquant en dur la taille de la partie à afficher (je sais pas si ça te va ...)

PS : j'ai pas testé mais dans l'idée cela devrait marcher

[Yangzebul]

Pas besoin d'utiliser des moyens détournés comme ça.

Pour clipper une partie d'un élèment il suffit simplement d'utiliser la propriété css "clip".

Par contre, comme son nom l'indique cette propriété fait du "clipping", pas du "cropping". Donc la partie masquée existe toujours et occupe toujours de l'espace dans ton flux. Si ça pose problème il faut utiliser d'autres solutions de positionnement sur ton élèment.

C'est plus simple (et propre) de cette façon.

[SnipX]

Merci beaucoup pour toutes vos réponses, je vais regarder ça, car c'est pour un projet mais j'en ai d'autres à rendre avant, donc je vais essayer de regarder ça ASAP.

En tout cas encore merci, et dès que je peux je teste; et si c'est OK je passe le sujet en Résolu.

[theocrite]

Toutes ces solutions chargent l'image entière. Ça réduit fortement l'intérêt de la manip.

Il me semble préférable de modifier l'image côté serveur avec gd ou imagemagik.

[Quarky]

Ah ça peut prêter à débat :

- charger l'image entière et afficher qu'une partie

- ou faire travailler le serveur pour créer une image contenant que la partie souhaitée.

A voir selon la taille de l'image, l'utilisation concrète qui en est faite (une ou plusieurs images sur ce principe par ex), ...

[theocrite]

Ben moi les deux seules utilités qui me viennent à l'esprit, sont :

* Ne pas faire charger l'image complète (pour les bas débits et la bande passante du serveur)

* Ne pas permettre de récupérer l'image côté client (et donc ne pas charger l'image entière).

Dans ces deux cas, il vaut mieux éviter de transférer l'image. Maintenant il y a peut être une autre raison qui ferait qu'il est préférable de masquer le surplus (perso je ne suis pas fan. Par exemple pour le CSS, il suffit que le navigateur implémente mal et le résultat affiché n'est pas celui attendu, contrairement à un découpage côté serveur qui affiche exactement ce que l'on doit attendre).

Maintenant c'est sûr que mes solution font travailler un peu le serveur.

[Yangzebul]

Par exemple pour le CSS, il suffit que le navigateur implémente mal et le résultat affiché n'est pas celui attendu

En même temps si tu commence comme ça tu n'utilises rien qui soit interprété par le navigateur. Tu envoies juste des flux bitmap rendus pas le serveur.

Il suffit de tester le rendu pour éviter les ecceuils.

[theocrite]

Tu envoies juste des flux bitmap rendus pas le serveur.

Hum, c'est une idée intéressante qui résoudra le problème de l'interopérabilité.

Plus sérieusement, c'est peut être un réflexe de barbu, mais n'ayant pas de Winwin chez moi, les tests sous un navigateur célèbre pour sa mauvaise implémentation des standards ne me sont pas souvent accessible, j'essaye donc d'éviter les mauvaises surprises.

Mais je reconnais que tu as raison dans ce que tu dis.