comment recadrer une image <img /> via css ?

[Invité]

je voudrais savoir comment il est possible de n'afficher qu'une partie (recadrage) d'une image grace à css mais sans utiliser un image de fond

[calimo]

Avec la propriété clip peut-être ?
Je ne sais pas si elle est bien implémentée dans Firefox, ce serait une bonne occasion de vérifier (visiblement pas )

[nic]

Tu peux mettre ton image (balise img) à l'intérieur d'un div de la taille désirée, dire que tout ce qui déborde du div doit être caché et utiliser des marges négatives pour afficher la partie désirée de ton image.

Sur ce prinicpe là à adapter et à compléter :

Code : Tout sélectionner

  #redim { 
    width: 100px;
    overflow: hidden;
    margin-top: -10px;
    }

Mais à moins d'utiliser ça pour des effets spéciaux ou des animations, tu as intérêt, pour optimiser le temps de chargement de ta page à utiliser une image qui est directement celle que tu désires afficher en redimensionnant ton image initiale avec un outil de retouche (The Gimp par exemple).

[Invité]

merci pour ces réponces

oui c'est pour faire un préchargement d'une image entière et en voir seulement un aperçu d'une partie ... enfin c'est pas clair comme ça mais c'est que les images ne peuvent être toutes afficher en même temps faute de place mais avec un mouseover sur chacune d'entre-elle entraine une vue "grandeur nature" ...

le but étant minimiser le nombre de fichier à charger démo de site dynamique offline...

[Invité]

j'avais aussi tester clip mais ça marchait pas donc j'ai posé la question comment faire ... bref encore de la bidouille en attendant d'avoir des browsers vraiment compatibles css !!!

[calimo]

Eh oui malheureusement. Et dire qu'on a marché sur la Lune il y a plus de 35 ans...

[Elyoukey]

j'ai testé clip, et ça fonctionne, mais c'est un peu le bocson.
En fait il faut (ou pas) lui mettre une virgule entre les coordonées.

Pour moi ça marche :

Code : Tout sélectionner

.mini{
position: absolute;
left : 0 px;
top : 0 px;
clip: rect(0 40px 40px 0);
clip: rect(0,40px,40px,0);
border : 1px;
z-index : 10;
} 

en mettant les deux, ça fonctionne avec IE ou firefox

[calimo]

Il faut mettre les virgules.

[Elyoukey]

Il faut mettre les virgules.

oui, c'est ça (javais la flemme de retrouver la page), il faut mettre les virgules, mais certains navigateurs sont pas vraiment aux normes