Comment puis-je afficher juste une partie d'une image en HTML / CSS?

Disons que je veux un moyen d'afficher uniquement le centre 50x50px d'une image de 250x250px en HTML. Comment puis je faire ça. Aussi, y a-t-il un moyen de faire cela pour les références css: url ()?

Je connais le clip en CSS, mais cela ne semble fonctionner que lorsqu'il est utilisé avec un positionnement absolu.

Une façon de le faire est de définir l'image que vous souhaitez afficher comme arrière-plan dans un conteneur (td, div, span, etc.), puis d'ajuster la position de l'arrière-plan pour obtenir le sprite souhaité.

Comme il est mentionné dans la question, il y a la clippropriété css, bien qu'il ne nécessite que l'élément clipsage est position: absolute;( ce qui est dommage):

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

Démo JS Fiddle , pour expérimentation.

Pour compléter la réponse originale - un peu tardivement - je modifie pour montrer l'utilisation de clip-path, qui a remplacé la clippropriété désormais obsolète .

La clip-pathpropriété permet une gamme d'options (plus que l'original clip), de:

• inset- formes rectangulaires / cuboïdes, définies avec quatre valeurs comme «distance-de» (top right bottom left).
• circle- circle(diameter at x-coordinate y-coordinate).
• ellipse- ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
• polygon- défini par une série de coordonnées x/ ypar rapport à l'origine de l'élément du coin supérieur gauche. Comme le chemin est fermé automatiquement le nombre minimum de points réaliste pour un polygone doit être trois, tout moins (deux) est une ligne ou (un) est un point: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - cela peut être soit une URL locale (en utilisant un sélecteur d'id CSS) ou l'URL d'un fichier externe (en utilisant un chemin de fichier) pour identifier un SVG, bien que je n'ai pas expérimenté l'un ou l'autre (pour le moment), donc je ne peut offrir aucun aperçu de leur avantage ou de leur mise en garde.

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

Démo JS Fiddle , pour expérimentation.

Références:

• clip- Remarque: obsolète .
• clip-path(MDN) .
• clip-path(W3C) .

Une autre alternative est la suivante, mais 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 masque avec la taille souhaitée, et entourer l'image avec 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 toutes les versions importantes de tous les autres navigateurs.