¿Cómo puedo mostrar solo una parte de una imagen en HTML / CSS?

Digamos que quiero una manera de mostrar solo el centro de 50x50px de una imagen que tiene 250x250px en HTML. Cómo puedo hacer eso. Además, ¿hay alguna manera de hacer esto para las referencias css: url ()?

Soy consciente del clip en CSS, pero parece que solo funciona cuando se usa con posicionamiento absoluto.

Una forma de hacerlo es establecer la imagen que desea mostrar como fondo en un contenedor (td, div, span, etc.) y luego ajustar la posición del fondo para obtener el sprite que desea.

Como se menciona en la pregunta, existe la clippropiedad css, aunque sí requiere que el elemento que se está recortando sea position: absolute;(lo cual es una pena):

.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>

Demostración de JS Fiddle , para experimentación.

Para complementar la respuesta original, algo tardíamente, estoy editando para mostrar el uso de clip-path, que ha reemplazado la clippropiedad ahora en desuso .

La clip-pathpropiedad permite una variedad de opciones (más que la original clip), de:

• inset- formas rectangulares / cuboides, definidas con cuatro valores como 'distancia desde' (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- definido por una serie de x/ ycoordenadas en relación con el origen del elemento de la esquina superior izquierda. A medida que el camino se cierra automáticamente el número mínimo realista de puntos para un polígono debe ser de tres, cualquier menos (dos) es una línea o (uno) es un punto: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - Esto puede ser una URL local (usando un selector de id de CSS) o la URL de un archivo externo (usando una ruta de archivo) para identificar un SVG, aunque no he experimentado con ninguno (todavía), así que no puede ofrecer una idea de su beneficio o advertencia.

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>

Demostración de JS Fiddle , para experimentación.

Referencias

• clip- nota: en desuso .
• clip-path(MDN) .
• clip-path(W3C) .

Otra alternativa es la siguiente, aunque no es la más limpia, ya que supone que la imagen es el único elemento en un contenedor, como en este caso:

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

Luego puede usar el contenedor como una máscara con el tamaño deseado y rodear la imagen con un margen negativo para moverla a la posición correcta:

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

La demostración se puede ver en este JSFiddle .

Solo parece funcionar en IE> 9, y probablemente en todas las versiones significativas de todos los demás navegadores.