Una de las propiedades de CSS 2.1 es clip, una propiedad que nos sirve para generar efectos visuales que recortan los bordes de un elemento.
Esta es una útil alternativa para ya no generar un Thumbnail con PHP para cada imagen, de esta manera ahorraríamos espacio en nuestro servidor o hosting.
Este ejemplo nos muestra la manera en que se recorta una imagen con la propiedad clip, requiere de coordenadas que están en el siguiente orden: Arriba, Derecha, Abajo, Izquierda (TRBL).
Esta es la imagen que vamos a reducir y cortar
Para lograr este objetivo lo único que tenemos que hacer es crear los estilos para la imagen en el head del html
.clipout{
position:relative;
width:136px;
height:105px;
}
.clipin{
position:absolute;
clip:rect(50px 218px 155px 82px);
top:-50px;
left:-82px;
}
Después insertar los siguientes elementos dentro del BODY.
<div class="clipwrapper">
<div class="clip">
<img src="castle.jpg" />
</div>
</div>
El resultado es este:
Nota: Esta propiedad de CSS se recomienda usar en casos no tengan muchas imagenes en pantalla, para un listado es mejor llamar imagenes ya recortadas y no hacer muy pesada nuestra página web.
Mas detalles: Seifi.org
