Cortar y centrar una imagen con HTML y CSS

Cortar con margenes negativos

Poder cortar una imagen y mostrar la parte que realmente necesitas puede ser muy útil, por ejemplo, si quieres mostrar una imagen que tienes subdividida en 4 partes e imprimes en pantalla parte por parte. El conjunto total de la imagen es posible que sobrepase el tamaño, pero las subdivisiones hacen que no tengas que subir al servidor 4 imágenes y solo subas una. En este tutorial vamos a ver una de las formas posibles.

Para cortar imágenes con HTML yo suelo recurrir a dos formas utilizando CSS:

• El uso de márgenes negativos. Que es el que vamos a ver aquí.
• El uso de la propiedad clip. La explicaré en otro tutorial porque tiene algunas características interesantes y sobre todo en navegadores IE hay que hacer algunos ajustes.

Te recomiendo para un código más sencillo evitando poner el párrafo en modo flotante y con menos código para definir el estilo, visitar el siguiente tutorial: Cortar y centrar imágenes con HTML y CSS (II).

IMPORTANTE (última actualización): Cuando escribí este artículo, las webs en las que fue testeado el código, tenían código HTML4 y XHTML1.1 y no eran adaptables. Este código no está diseñado para ser utilizado en dispositivos adaptables y solo funcionará en dispositivos con pantalla grande, no en smartphones o tablets. Por este motivo, este código ha sido mejorado y adaptado a los nuevos dispositivos y puedes acceder a él desde aquí: Responsive imagen: centrar y cortar imágenes con HTML5 y CSS.

El uso de márgenes negativos

Es muy utilizado y además voy a conseguir que funcione perfectamente en casi todos los navegadores: IE (5.5 - 9), Firefox, Chrome, Opera, Safari, dispositivos móviles, tabletas etc. Pongo etc porque eson son los navegadores en los que lo he testeado. Si tú quieres ver si funciona en otros, simplemente lee este artículo porque vamos a hacer el ejemplo aquí.

Lo primero que necesitamos es una imagen. Voy a buscar una cualquiera en mi servidor, esta:

Dimensiones:

• Ancho (width): 423 píxeles (px)
• Alto (Height): 246 píxeles (px)

Normalmente el código que se usa para mostrar una imagen es parecido al siguiente (quito alt y title y centro la imagen desde el párrafo):

<p style="text-align: center;">
<img style="width: 423px; height: 246px;"
src="/imagen/imagen_ejemplo.png" /></p>

Observa que se muestra una imagen centrada dentro de un párrafo. Es el caso de la imagen anterior. Como ejemplo vamos a intentar mostrar el cuadro azul que pone "Memoria principal". Puedes observar que la imagen (<img>) y el párrafo (<p>) ya tienen un estilo específico que vamos a completar "en linea". Puedes crearte tu propio archivo de estilos pero como los márgenes no los puedes generalizar tendrás que hacerlo, de todas formas, inline.

Para el párrafo <p>, voy a poner el estilo siguiente:

overflow: hidden;
float: left;

Para la imagen <img> simplemente modificaremos los márgenes. Voy a calcular los respectivos píxeles desde el exterior de la imagen hasta el recuadro "Memoria principal" (aproximados):

• Arriba: 55px
• Derecha: 216px
• Abajo: 112px
• Izquierda: 140px

Conociendo esos datos ya podemos poner también el estilo a la imagen:

margin: -55px -216px -112px -140px;

Así que el código final es el siguiente:

<p style="overflow: hidden; float: left;">
<img style="margin: -55px -216px -112px -140px;"
src="/imagen/imagen_ejemplo.png" /></p>

Veamos cómo queda ese código:

Así de sencillo es. Y quiero que veas que lo estoy probando ahora mismo desde ¡Internet Explorer 5.5! Ahora, si quisieras, podrías añadir los estilos que consideres oportunos, por ejemplo, poner borde.

A pesar de esta sencillez, debes observar que el párrafo lo hemos puesto flotante a la izquierda (float: left;). Puedes usar del mismo modo float: right. Esto (propiedad flotante) es importante ya que si intentas escribir en otro párrafo después de la imagen, verás que quedará en un lateral. Me imagino que querrás que quede como este ejemplo. Para eso en el párrafo siguiente a la imagen puedes añadir: clear: both;. Para que lo tengas más claro mira el código fuente de esta página y el código que te pongo aquí:

<p style="overflow: hidden; float: left;">
<img style="margin: -55px -216px -112px -140px;"
src="/imagen/imagen_ejemplo.png" /></p>
<p style="clear: both;">Así de sencillo es...</p>

Y finalmente queda una última pregunta que te hago: ¿Cómo podemos centrar la imagen en pantalla? El estilo del párrafo no funciona (margin left-right auto), así que podemos centrar la imagen (realmente el párrafo) a mano con un margen izquierdo. Existe un grave problema en un navegador y es que IE6 que no lo hace correctamente y puedes llevarte una sorpresa porque desplaza el párrafo hacia la derecha más de lo debido. Esto es un problema porque puede ponerte la imagen fuera del alcance visual o deformarte la plantilla. Ya sabemos todos que IE6 desespera a muchos programadores web pero voy a intentar encontrar una fácil solución.

Solucionando el problema en IE6

Después de hacer muchas y muchas pruebas en los navegadores anteriores y en IE6 (el único que fallaba), encontré una simple solución que hará que podamos centrar la imagen en la mayoría de navegadores incluido IE6. Únicamente se trata de añadir al código del párrafo lo siguiente:

display: inline;

Lo más rápido para centrar en pantalla posiblemente sea hacerlo visualmente, aunque puedes calcularlo matemáticamente. Por lo tanto, si el ancho donde se escribe en esta web es aproximadamente 700px y el ancho del recorte es 66px, tenemos: 700/2 = 350px-33px = 317px (aproximadamente y a partir de aquí lo corrijes a mano). El código final y el ejemplo es el siguiente:

<p style="overflow: hidden; float: left; display: inline; margin-left: 317px;">
<img style="margin: -55px -216px -112px -140px;"
src="/imagen/imagen_ejemplo.png" /></p>
<p style="clear: both;">Espero que este código...</p>

El resultado (obsérvalo en varios navegadores):

Espero que este código que es muy sencillo te sea útil. Puedes ver que funciona en IE6 e incluso en IE5.5 y en todos los navegadores que hemos comentado en este artículo. Vuelvo a repetir que puedes visualizar este tutorial desde cualquier navegador para hacer tú mismo la prueba.

Veremos más adelante otra forma de hacerlo con el uso de la propiedad clip y algunas configuraciones curiosas en determinados navegadores.