tamaño - ¿Cómo puedo mostrar solo una porción de una imagen en HTML/CSS?

insertar imagen html url

Question

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

Conozco el clip en CSS, pero parece que solo funciona cuando se usa con posicionamiento absoluto.

Answer 1

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 todas las versiones significativas de todos los demás navegadores.

Answer 2

Si bien ya has aceptado una respuesta, solo agregaré que existe la propiedad del clip css (algo poco conocida), aunque sí requiere que el elemento que se recorta 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 la experimentación.

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

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

• inset : formas rectangulares / paralelepípedas, 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 coordenadas x / y 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 real 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 (utilizando un selector de id CSS) o la URL de un archivo externo (utilizando una ruta de archivo) para identificar un SVG, aunque no he experimentado con ninguno (todavía), por lo que No puedo 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 la experimentación.

Referencias

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

Answer 3

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