#html y #css: #image #crop, usease; no mostrar imagen completamente by @aNieto2k

Fuente: http://www.anieto2k.com/2009/09/08/3-tecnicas-de-hacer-crop-con-css/

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.

800px-Image_cropping_aspect_ratios
(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.

Márgenes negativo

Esta 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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s