[RÉSOLU] Cibler des images en fonction de leur taille

Bonjour à tous,

voici une question qui n'est traitée nul part et pour cause, sans doute qu'il n'y a pas (encore ?) de solution. Mais je souhaitais tout de même la soumettre pour m'en assurer.

L'idée est la suivante : je récupère une série d'articles contenant des images. Je n'ai pas la main sur le code html de ces articles mais je veux les rendre joli. Donc là pas de soucis, j'utilise du CSS.
Maintenant, l'idée est de rendre les grandes images (supérieures à 500px par exemple) de type bloc, leur appliquer un petit ombrage, et les arrondir légèrement. Le problème est que pour les petites images (de type smiley par exemple) je ne veux pas appliquer cet effet.

J'aimerai donc avoir quelque chose de la forme :

img[width>=500] {
	display: block;
	width: 100%;
	box-shadow: 0 0 5px #000;
	border-radius: 3px;
}

Évidemment cela ne marche pas vu que :
1. La condition >= n'existe pas
2. width fait référence à l'attribut et non pas à la taille réelle

Mais savez-vous si il existe une solution à ce problème ?

Merci d'avance !


Edit : solutions trouvées
1. Passer par du javascript en ajoutant une classe big par exemple aux images de plus de 500px. Un exemple en JQuery pourrait être :

$("img").each(function() {
	if($(this).width() > 500) {
		$(this).addClass("big");
	}
});

Et le CSS correspondant :

img.big {
	display: block;
	width: 100%;
	box-shadow: 0 0 3px #666;
	border-radius: 3px;
}

2. Seulement en CSS en se basant sur le chemin d'accès aux images. Cela suppose donc d'avoir la main sur l'emplacement de ces images. On passe ici par les sélecteurs CSS de type regex :

img[src*="big/"] { /* le code CSS précédent par exemple */ }

Modifié par Fargo (13 Mar 2013 - 16:59)

Bonsoir,

Cela relève plus du style côté JavaScript, non ?

bonjour,

Si tes images sont stockées dans des répertoire différents, alors, l' attribut src te sera utile en ne ciblant les images en provenance d'un seul répertoire ou d'une particularité commune dans leur nom ( a styler ou pour un reset de l'ombrage). Sinon , JS

Cdt

gc-nomade a écrit :
bonjour,

Si tes images sont stockées dans des répertoire différents, alors, l' attribut src te sera utile en ne ciblant les images en provenance d'un seul répertoire ou d'une particularité commune dans leur nom ( a styler ou pour un reset de l'ombrage). Sinon , JS

Cdt

Effectivement, tu peux mettre en place une règle du genre :

img[src^="big/"]

lddsoft a écrit :
Comment Fargo va-t-il modifier la valeur de l'attribut "src" de ses images dans le code HTML?

heu, il ne s'agit pas de les modifier , mais de tirer partie , si possible, de l'endroit ou son stocké les images ou de leur nom ou extension. Je doute que les smileys de son éditeur et que les images uploadée pour illustrer ses articles soient dans le même dossier.

Le dossier de stockage, le nom (ou partie du nom) ou l'extension de l'image sont autant de caractères que l'ont peut cibler a partir de la feuille de style, Herman en donne un exemple.

http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#attribute-selectors

Cdt,
++

Merci à tous de votre participation

Évidemment cela pourrait se faire en JS et faciliterait la tâche mais j'aime m'affranchir le plus possible du JS, surtout que beaucoup de choses faites généralement ainsi peuvent se faire en CSS.

Pour ce qui est de gérer en fonction du dossier, ça pourrait marcher mais pas dans mon cas. Le soucis est que j'agrège des articles de différents sites et que donc les images peuvent être n'importe où et se nommer de n'importe quelle manière. L'idée serait vraiment de se baser exclusivement sur la taille.
Je pensais que ce serait un truc (caché) que CSS pourrait gérer de base mais apparemment non.

Finalement, la seule manière de faire serait d'ajouter en JS une classe en fonction de la taille de l'image

@gc-nomade

gc-nomade a écrit :
Le dossier de stockage, le nom (ou partie du nom) ou l'extension de l'image sont autant de caractères que l'ont peut cibler a partir de la feuille de style, Herman en donne un exemple.

Je suis bien d'accord avec toi, mais, d'après ce que nous dit Fargo, il n'a aucune main libre sur le fichier HTML. J'avais émis ma remarque en me disant qu'il ne pourrait, par conséquent, pas modifier les chemins vers les fichiers images. Je pense donc que l'exemple d'Hermann n'est pas valable dans le cas qui nous préoccupe. Perso, je ne vois que le JS pour s'en sortir ...
Qu'en penses-tu?

lddsoft a écrit :
@gc-nomade
Je suis bien d'accord avec toi, mais, d'après ce que nous dit Fargo, il n'a aucune main libre sur le fichier HTML.

Ou l'arborescence
Sinon effectivement il faut passer par du JS.

lddsoft a écrit :
@gc-nomade
Je suis bien d'accord avec toi, mais, d'après ce que nous dit Fargo, il n'a aucune main libre sur le fichier HTML. J'avais émis ma remarque en me disant qu'il ne pourrait, par conséquent, pas modifier les chemins vers les fichiers images. Je pense donc que l'exemple d'Hermann n'est pas valable dans le cas qui nous préoccupe. Perso, je ne vois que le JS pour s'en sortir ...
Qu'en penses-tu?

Je n'en penses rien , je n’évoquais qu'une piste CSS possible avec le peu d'infos fournies au départ ...

Avec son complément d'info, la solution s'impose d'elle même.

voilou,
Cdt

Devant l'unanimité générale, je passe le sujet en résolu et fait un récap' des solutions proposées dans mon premier message. Merci à tous

Donc, tu vas utiliser du JS, c'est bien ce qu je disais au départ ...