Page 1 sur 1
comment recadrer une image <img /> via css ?
Publié : 17 août 2005, 15:43
par 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
Publié : 17 août 2005, 16:23
par 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 
)
Publié : 18 août 2005, 09:20
par 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).
Publié : 19 août 2005, 17:55
par 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...
Publié : 19 août 2005, 18:00
par 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 !!!
Publié : 19 août 2005, 18:48
par calimo
Eh oui malheureusement. Et dire qu'on a marché sur la Lune il y a plus de 35 ans...
Publié : 26 août 2005, 10:16
par 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
Publié : 26 août 2005, 10:28
par calimo
Il faut mettre les virgules.
Publié : 26 août 2005, 10:44
par Elyoukey
calimo a écrit :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