aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Alen Grakalic publica en CSSGlobe un artículo sobre 3 formas de hacer crop con CSS. Un interesante artículo que muestra las capacidades del lenguaje y de los diferentes caminos de los que disponemos para conseguir lo mismo.

¿Que es crop?

Llamamos crop al recorte selectivo de una imagen. Este recorte no afecta ni al ancho ni al alto de la imagen, y únicamente se encargar de mostrar nuestra selección al usuario.

(Ver Imagen)

Como vemos en la imagen, sacada de la Wikipedia, esta técnica la usamos cada día al ver la televisión, ya que para no perder el ratio de la imagen y así no deformar los objetos que visualizamos se realiza un crop adaptando la imagen sin perder la relación de aspecto de la imagen.

Técnica 1: Márgenes negativo

Esta primera técnica, basada en el uso de márgenes negativos simula el efecto crop sobre la imagen, haciendo que la imagen se oculte sobre una capa superior.

// HTML
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

// CSS
.crop{
 float:left;
 margin:.5em 10px .5em 0;
 overflow:hidden; /* IMPORTANTE */
 border:1px solid #ccc;
 }

 /* Indicamos los márgenes que dejamos para simular el crop. */
.crop img{
 margin:-20px -15px -40px -55px;
 }

Ver una demo.

Técnica 2: Position absolute

Similar a la anterior, aunque en este caso usamos la propiedad position, para hacer que el elemento flote detrás del elemento padre y así se oculte, mostrando la porción de la imagen que deseemos mostrar.

// HTML
<p class="crop"><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p> 

// CSS
.crop{
 float:left;
 margin:.5em 10px .5em 0;
 overflow:hidden; /* IMPORTANTE */
 position:relative; /* IMPORTANTE */
 border:1px solid #ccc;
 width:150px;
 height:90px;
 }
 /* Ocultamos parte de la imagen */
.crop img{
 position:absolute;
 top:-20px;
 left:-55px;
 }

Ver una demo.

Técnica 3: Usando la propiedad clip

La propiedad clip, fue concebida para este tipo de acciones. Se trata de hacer que elemento padre tenga un agujero de tamaño especificado sobre la imagen, mostrando así la parte de la imagen que deseemos mostrar.

// HTML
<div class="crop"><p><a href="http://templatica.com" title="Css Templates"><img src="img.jpg" alt="css template" /></a></p></div>

// CSS
.crop{
 float:left;
 position:relative;
 width:150px;
 height:90px;
 border:1px solid #ccc;
 margin:.5em 10px .5em 0;
 }
.crop p{
 margin:0;
 position:absolute;
 top:-20px;
 left:-55px;
 clip:rect(20px 205px 110px 55px); /* Agujero rectángulo de medida específica */
 }

Ver una demo.

Conclusión

Tres técnicas que permite realizar la misma funcionalidad y que ofrecen la posibilidad de implementar fácilmente en cualquier aplicación web. ¿Tu por cual te decantas?