Disons que je veux un moyen d'afficher uniquement le centre 50x50px d'une image de 250x250px en HTML. Comment puis-je faire cela ? Existe-t-il également un moyen de faire cela pour les références css:url() ?
Je suis au courant de clip en CSS, mais cela ne semble fonctionner que lorsqu'il est utilisé avec un positionnement absolu.
Bien que vous ayez déjà accepté une réponse, j'ajouterai simplement qu'il existe la (assez peu connue) clip css, bien qu'il fait exigent que l'élément à découper soit position: absolute; (ce qui est une honte) :
img {
position: absolute;
clip: rect(0, 100px, 200px, 0);
/* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}Il existe un Participation de W3Schools au clip propriété J'y fais référence. uniquement pour établir un lien avec le démo "essayez-le" qu'ils proposent également . Je ne recommanderais cependant pas W3Schools pour autre chose que occasionnel référence.
Une découverte incroyable, merci beaucoup :) Juste pour info, ce n'est pas aussi limité qu'on pourrait le croire. Si vous avez un div conteneur d'image (id="img_container") autour de la balise img, il suffit de rendre la position de img_container relative, et de rendre img absolue, vous pouvez couper l'image de cette façon.
Pour clarifier, vous devez définir la largeur et la hauteur du conteneur td, div, span ou autre à 50px pour que cela fonctionne.
@Espo, Cela semble être une approche assez standard, mais que se passe-t-il si vous avez une image sprite qui contient plusieurs images individuelles de taille 32x32, et que vous voulez afficher l'une d'entre elles sur un div, span etc. qui est plus grand que 32x32... le réglage de la position d'arrière-plan ne fonctionne plus.
Une autre alternative est la suivante, bien qu'elle ne soit pas la plus propre car elle suppose que l'image est le seul élément d'un conteneur, comme dans ce cas :
<header class="siteHeader">
<img src="img" class="siteLogo" />
</header>Vous pouvez ensuite utiliser le conteneur comme un masque de la taille souhaitée, et entourer l'image d'une marge négative pour la déplacer dans la bonne position :
.siteHeader{
width: 50px;
height: 50px;
overflow: hidden;
}
.siteHeader .siteLogo{
margin: -100px;
}La démo peut être vue dans ce JSFiddle .
Ne semble fonctionner que dans IE>9, et probablement dans toutes les versions significatives de tous les autres navigateurs.
Bien que cette méthode soit un peu compliquée, elle a l'avantage de fonctionner dans tous les navigateurs (clip est déprécié et clip-path ne fonctionne pas dans IE) et de fonctionner lorsque vous essayez d'imprimer la page web (les images d'arrière-plan sont ignorées par défaut).
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
A List Apart devrait figurer dans la liste des sites à visiter en cas de problèmes de HTML/CSS/JS : Voici une façon de faire des sprites , et en voici un autre utilisant JS .
1 votes
Utilisez un sprite - voir ici w3schools.com/css_image_sprites.asp