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

Question

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

Soy consciente de acortar en CSS, pero eso parece funcionar solo cuando se usa con posicionamiento absoluto.

Answer 1

Una forma de hacerlo es configurar 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 objeto que desea.

Answer 2

Si bien ya aceptó una respuesta, solo agregaré que existe la (algo poco conocida) clip propiedad CSS, aunque hace requieren que el elemento que se está recortando sea position: absolute; (que 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 experimentar.

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

El clip-path La propiedad permite una variedad de opciones (más que el 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/y coordenadas en relación con el origen del elemento en la esquina superior izquierda.Como el camino se cierra automáticamente, el número mínimo realista de puntos para un polígono debe ser 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 — puede ser una URL local (usando un selector de identificación CSS) o la URL de un archivo externo (usando una ruta de archivo) para identificar un SVG, aunque no he experimentado con ninguno de los dos (todavía), así que no puede ofrecer ninguna idea sobre 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 experimentar.

Referencias:

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

Answer 3

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

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

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

Sólo parece funcionar en IE>9, y probablemente en todas las versiones importantes de todos los demás navegadores.