Come posso visualizzare solo una parte di un'immagine in HTML / CSS?

Diciamo che voglio un modo per visualizzare solo il centro 50x50px di un'immagine che è 250x250px in HTML. Come lo posso fare. Inoltre, c'è un modo per farlo per i riferimenti css: url ()?

Sono a conoscenza di clip nei CSS, ma sembra funzionare solo se utilizzato con posizionamento assoluto.

Un modo per farlo è impostare l'immagine che si desidera visualizzare come sfondo in un contenitore (td, div, span ecc.) E quindi regolare la posizione dello sfondo per ottenere lo sprite desiderato.

Come accennato nella questione, la clipproprietà css, anche se non richiede che l'elemento ritagliate è position: absolute;(che è un peccato):

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

Demo di JS Fiddle , per sperimentazione.

Per integrare la risposta originale - in qualche modo tardivamente - sto modificando per mostrare l'uso di clip-path, che ha sostituito la clipproprietà ora deprecata .

La clip-pathproprietà consente una gamma di opzioni (molto più dell'originale clip) di:

• inset- forme rettangolari / cuboidi, definite con quattro valori come "distanza da" (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- definito da una serie di x/ ycoordinate in relazione all'origine dell'elemento nell'angolo in alto a sinistra. Come il percorso si chiude automaticamente il numero minimo di punti realistica per un poligono dovrebbe essere tre, qualsiasi meno (due) è una linea o (uno) è un punto: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - questo può essere un URL locale (utilizzando un selettore ID CSS) o l'URL di un file esterno (utilizzando un percorso file) per identificare un file SVG, anche se non ho ancora provato ((ancora)), quindi non può offrire alcuna comprensione del loro beneficio o avvertimento.

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>

Demo di JS Fiddle , per sperimentazione.

Riferimenti:

• clip- nota: obsoleto .
• clip-path(MDN) .
• clip-path(W3C) .

Un'altra alternativa è la seguente, sebbene non la più pulita in quanto presuppone che l'immagine sia l'unico elemento in un contenitore, come in questo caso:

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

È quindi possibile utilizzare il contenitore come maschera con le dimensioni desiderate e circondare l'immagine con un margine negativo per spostarlo nella posizione corretta:

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

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

La demo può essere vista in questo JSFiddle .

Sembra funzionare solo in IE> 9 e probabilmente in tutte le versioni significative di tutti gli altri browser.