¿Cómo mostrar solo una parte de una imagen solo con la etiqueta img?

Question

En la actualidad, todas mis imágenes tener este aspecto:

HTML

<img class="photo" src="foo.png" /> 

CSS

.photo { 
    padding: 3px; 
    border: 1px solid #000; 
    background: #fff; 
    width: 64px; 
    height: 64px; 
    display: block; 
} 

Este espera que la relación de aspecto de la imagen para siempre ser 1: 1. Ahora, un nuevo requisito de proyecto ha llegado para que las imágenes no tengan que ser 1: 1. Por el contrario, pueden ser rectángulos altos:

En este caso, me gustaría sólo para revelar la plaza superior de la imagen:

¿Cómo se puede hacer esto con una etiqueta simple <img>? Sé cómo hacerlo con dos etiquetas: simplemente envuelva el img con un div, aplique relleno 3px al div y coloque el URL como background-image del img. Pero me gustaría saber cómo hacer esto de una manera más limpia, sin una etiqueta HTML adicional.

Answer 1

Actualización final: probado IE8 +: This solution utiliza un refinamiento de la idea de Surreal Dreams de utilizar el contorno para obtener el borde. Esto permite una simplicidad de navegador cruzada en comparación con the linear-gradient method que estaba buscando. Funciona en IE7, excepto el outline (no compatible).

Manteniéndolo como una etiqueta img con un src lo mantiene semántico.

A margin: 1px se aplica para dar outline "espacio" en el diseño, ya que por naturaleza outline ocupa espacio. La altura cero suprime la imagen principal y el relleno se utiliza para crear la altura deseada para la imagen de fondo (que se establece igual que la imagen principal) para mostrar.

HTML

<img class="photo" src="foo.png" style="background-image: url(foo.png)" /> 

CSS

.photo { 
    padding: 64px 0 0 0; 
    border: 3px solid #fff; 
    outline: 1px solid #000; 
    margin: 1px; 
    width: 64px; 
    height: 0px; 
    display: block; 
} 

Answer 2

Eche un vistazo a la propiedad clip.

http://www.w3schools.com/cssref/pr_pos_clip.asp

Aquí un ejemplo con su imagen: http://jsfiddle.net/2U3CE/1/

Código:

img{ 
    position:absolute; 
    clip:rect(0,73px,73px,0); 
} 

Answer 3

Uso clip de

http://www.w3schools.com/cssref/pr_pos_clip.asp

Answer 4

Pienso que usted es l ooking para la propiedad CSS dentro CLIP:

.photo-clipped { 
    position: absolute; 
    clip: rect(0px,64px,64px,0px); 
} 

<img src="some_image.gif" class="photo photo-clipped" /> 

Answer 5

En realidad, se puede hacer esto con una sola etiqueta - un div. ¿Importa que no sea una etiqueta img?

<div style="display: inline-block; width: 50px; height: 50px; background: url(test.jpg);"></div> 

Nunca se utiliza una etiqueta <img>, que acaba de configurar el div y ya está. Establezca el tamaño, agregue relleno, borde, etc., y preferiblemente coloque todos los estilos reutilizables en una clase y configure la imagen de fondo por div. Se termina con esto:

<div class="hip2bsquare" style="background: url(test.jpg);"></div> 

CSS:

.hip2bsquare { 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    border: 3px solid #FFF; 
    outline: 1px solid #000; 
} 

Esto utiliza la frontera para agregar blanco y delinear añadir negro. Probablemente sea un abuso del modelo de caja, pero debería darle la apariencia.