Como posso exibir apenas uma parte de uma imagem em HTML/CSS?

Question

Digamos que eu queira exibir apenas o centro de 50x50px de uma imagem de 250x250px em HTML.Como eu posso fazer isso.Além disso, existe uma maneira de fazer isso para referências css:url()?

Estou ciente de grampo em CSS, mas parece funcionar apenas quando usado com posicionamento absoluto.

Answer 1

Uma maneira de fazer isso é definir a imagem que você deseja exibir como plano de fundo em um contêiner (td, div, span etc) e então ajustar a posição do plano de fundo para obter o sprite desejado.

Answer 2

Embora você já tenha aceitado uma resposta, acrescentarei apenas que existe o (um tanto pouco conhecido) clip propriedade css, embora faz exigem que o elemento que está sendo cortado seja position: absolute; (o que é uma 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>

Demonstração JS Fiddle, para experimentação.

Para complementar a resposta original – um tanto tardiamente – estou editando para mostrar o uso de clip-path, que substituiu o agora obsoleto clip propriedade.

O clip-path propriedade permite uma gama de opções (mais do que o original clip), de:

• inset — formas retangulares/cubóides, definidas com quatro valores como 'distância 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 - definido por uma série de x/y coordenadas em relação à origem do elemento no canto superior esquerdo.Como o caminho é fechado automaticamente, o número mínimo realista de pontos para um polígono deve ser três, qualquer número menor (dois) é uma linha ou (um) é um ponto: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - pode ser uma URL local (usando um seletor de id CSS) ou a URL de um arquivo externo (usando um caminho de arquivo) para identificar um SVG, embora eu não tenha experimentado nenhum deles (ainda), então eu não pode oferecer nenhuma visão quanto ao seu benefício ou advertência.

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>

Demonstração JS Fiddle, para experimentação.

Referências:

• clip - observação: descontinuada.
• clip-path (MDN).
• clip-path (W3C).

Answer 3

Outra alternativa é a seguinte, embora não seja a mais limpa, pois assume que a imagem é o único elemento de um contêiner, como neste caso:

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

Você pode então usar o contêiner como uma máscara com o tamanho desejado e cercar a imagem com uma margem negativa para movê-la para a posição correta:

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

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

A demonstração pode ser vista em este JSFiddle.

Parece funcionar apenas no IE> 9 e provavelmente em todas as versões significativas de todos os outros navegadores.