Cortar y centrar imágenes con HTML y CSS (II)

Buscando un código sencillo, efectivo y compatible

En un tutorial anterior, vimos cómo centrar y cortar imágenes con HTML y CSS usando márgenes negativos. Aquel código funciona correctamente y lo hice principalmente para poder usar el párrafo en modo flotante y así permitir escribir un texto en un lateral de la imagen. Sin embargo, no siempre querrás tenerlo flotante y el "problemilla" es que el código anterior añade algún estilo de más. Hoy vamos a ver un sencillo código HTML y CSS para cortar y centrar imágenes y que sea compatible con la mayoría de navegadores (incluido IE6).

IMPORTANTE: 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.

En esta primera parte explicaré cómo fui desarrollando el código, pero si quieres ir "al grano" y directamente a la solución, puedes dirigirte directamente al final.

Explicación del código

Inconveniente código anterior

El código que hice en el artículo del enlace anterior, tenía un pequeño inconveniente y es que fue centrado con un margen izquierdo, algo que no es preciso y menos cuando tienes que modificar la template. Esto tiene solución pero hay que añadir más código, tiene que ser más sencillo.

En el ejemplo de hoy voy a quitar la propiedad float y la imagen estará de igual forma dentro de un párrafo (<p>). Verás que tendrá muchos menos estilos. Lo primero de todo es tomar un imagen cualquiera del servidor. Voy a elegir esta:

El código para mostrar la imagen dentro de un párrafo es este:

<p>
  <img src="/imagen/imagen_ejemplo.png" />
</p>

Buscando márgenes y estilos

La imagen anterior tiene 690 px de ancho y 127 px de alto. En este caso solo quiero mostrar el rectángulo que contiene las palabras Function y {main}. Los márgenes en píxeles de dicho rectángulo son los siguientes:

• Arriba: 55px
• Derecha: 205px
• Abajo: 22px
• Izquierda: 322px

¿Cómo los calculo? Yo lo hago desde un navegador, por ejemplo, con Google Chrome que permite con las teclas arriba y abajo modificar rápidamente los márgenes. Lo primero que voy a hacer es poner al párrafo overflow: hidden, para que al utilizar los márgenes negativos no muestre el contenido de la imagen. Queda:

<p style="overflow: hidden;">
  <img src="/imagen/imagen_ejemplo.png" />
</p>

Ahora simplemente añado los márgenes a la imagen. El margen derecho no funciona, así que lo dejo a 0, quedando lo siguiente:

<p style="overflow: hidden;">
  <img style="margin: -55px 0 -22px -322px;" src="/imagen/imagen_ejemplo.png" />
</p>

Os muestro el ejemplo real de ese código: (esta siguiente imagen no se ve correctamente en todos los navegadores, pero solo sirve de referencia para obtener el código final que sí es compatible)

Como puedes observar todavía queda por eliminar la columna "Location". Para esto solo hay que darle un ancho al párrafo. El código queda como sigue:

<p style="overflow: hidden;width: 163px;">
  <img style="margin: -55px 0 -22px -322px;" src="/imagen/imagen_ejemplo.png" />
</p>

El ejemplo real es este:

Darle un ancho al párrafo es algo muy útil porque así podremos centrarlo. Y se puede hacer poniendo tanto el margen izquierdo como el derecho en auto.

Ejemplo y código final

El código final -y sencillo- que podrás usar es el siguiente:

<p style="overflow: hidden;width: 163px;margin: 5px auto;">
  <img style="margin: -55px 0 -22px -322px;" src="/imagen/imagen_ejemplo.png" />
</p>

Y para que lo puedas comprobar en tu Sistema Operativo y navegador, dejo el ejemplo:

Dicho código ha sido testeado en IE6-IE10, Firefox, Chrome, Safari, Opera, Sea Monkey y en distintos otros navegadores, tablets y smarphones.

No tiene privilegios para responder a los comentarios.