Comment montrer une région sur une image avec CSS

Question

J'ai une image 125x250 et je dois juste afficher une région 125x125 de celui-ci.
Puis-je le faire via CSS? Comment?

Merci

Answer 1

Il est la propriété CSS clip mais il est un peu maladroit de mettre en place et, comme @edd souligne dans sa réponse, travaille pour des images absolument et positionné de manière fixe seulement.

Personnellement, je créer un 125x125 div et, en fonction de la situation, que ce soit

• Demandez l'image soit la de div background-image (vous pouvez positionner même à l'aide background-position

• Mettre l'image , et donner le divoverflow: hidden (avantage: il sera toujours un élément d'image avec un texte ALT)

Si vous souhaitez que le tout se comporte comme une image dans le flux de documents, vous pouvez attribuer à la propriété la propriété display: inline-block (non prise en charge par les anciens IE).

Answer 2

Vous pouvez utiliser la propriété CSS Clip, mais c'est un peu fastidieux à configurer car l'image et le parent doivent être soit absolus soit positionnés. Mais cela fonctionne très bien une fois l'installation.

exemple:

img 
{ 
position:absolute; 
clip:rect(0px,125px,125px,0px); 
} 

Answer 3

Cette technique est aussi appelée "sprites". Un ALA article from 2004 a démontré les bases, une autre bonne et brève introduction peut être trouvée sur w3schools (www.w3schools.com/css/css_image_sprites.asp).

Il s'agit donc fondamentalement d'un élément parent positionné relative. Un élément enfant a une taille définie et un arrière-plan comme background:url("sprite.png") 0 0;. Pour utiliser une autre partie de l'image-objet, par exemple à un autre élément enfant, vous pouvez définir background:url("sprite.png") -125 0;.

Answer 4

Mettez votre image à l'intérieur div

<div style="width: 125px; height: 125px; overflow: hidden;"> 
    <img src="..." /> 
</div>