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

Posteriormente a consultar con especialistas en esta materia, programadores de deferentes ramas y maestros hemos dado con la solución al problema y la plasmamos en esta publicación.

Solución:

Como se menciona en la pregunta, existe la clip propiedad css, aunque lo 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 */

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

Para complementar la respuesta original, algo tarde, estoy editando para mostrar el uso de clip-pathque ha reemplazado al ahora obsoleto clip propiedad.

los clip-path propiedad permite una gama de opciones (más que el original clip), de:

• inset — formas rectangulares/paralelepipédicas, 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 — definida por una serie de x/y coordenadas en relación con el origen del elemento de la esquina superior izquierda. Como la ruta se cierra automáticamente, el número mínimo realista de puntos para un polígono debe ser tres, 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 ninguna idea en cuanto a 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%);

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

Referencias:

• clip – Nota: obsoleto.
• clip-path (MDN).
• clip-path (W3C).

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 de fondo para obtener el sprite que desea.

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

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 importantes de todos los demás navegadores.

Si piensas que te ha resultado útil nuestro artículo, sería de mucha ayuda si lo compartes con otros juniors de este modo contrubuyes a dar difusión a nuestra información.

---

---

Utiliza Nuestro Buscador