Responsive Image: cortar y centrar imágenes con HTML5 y CSS

Código avanzado.

Han sido muchas horas de programación y de prueba y error para llegar, por fin, a este código. Por mucho que he buscado, y en varios idiomas, no he encontrado solución a un problema que me surgió al hacer la web adaptable a varios dispositivos.

Hace un tiempo hablé sobre cómo cortar y centrar imágenes con HTML y CSS, pero cuando ese código lo usé en una web adaptable, observé que las imágenes que había "cortado" solo se veían bien en la pantalla de un ordenador, la propiedad max-width: 100% ¡las hacía desaparecer en un dispositivo con pantalla pequeña! Así que me puse a investigar y empecé a leer, probar, inventar, a perder muchas horas y sí que llegué a encontrar varias posibles soluciones, por ejemplo, usando la imagen como fondo, pero no eran soluciones aceptables. Cansado de tantas pruebas y a punto de decidirme por una librería PHP, uno de los tantos códigos que había usado funcionó a medias. Muy contento, no te lo voy a negar, fui adaptando y optimizando aquel primer código y llegué por fin al que hoy os quiero presentar.

Estoy convencido que os va a resultar muy útil ya que es sencillo, ligero y lo voy a explicar desde cero para entender los valores matemáticos que hay que utilizar. Si no te interesa la explicación, puedes ir directamente al final y copiar el código, pero seguramente no entenderás los datos introducidos. ¿Por qué he puesto código avanzado? Porque los valores exactos matemáticos que acabo de comentar, no son sencillos de obtener.

La imagen de muestra. Explicando el código HTML y CSS paso a paso.

Voy a utilizar durante todo este artículo la siguiente imagen:

Y la siguiente explicación enseña cómo ir desarrollando el código para que se vea bien el rectángulo de la 1ª parte 1. Como ves, la imagen al completo está dividida en 8 partes. Mide en total 600 píxeles (px) de largo por 400px de ancho, con lo que cada parte mide: 150 x 200 (px). La idea principal en código HTML para mostrar la imagen, es la siguiente:

<div>
  <img src="/tabla600x400.png">
</div>

Es muy sencillo. Ahora voy a poner al <div> una clase para añadirle unas propiedades fijas:

<div class="crop-img">
  <img src="/tabla600x400.png">
</div>

Las propiedades del <div>

Al <div> le voy a añadir "inline" (en línea) el ancho de cada una de las partes: son 150 píxeles:

<div class="crop-img"  style="width: 150px;">
  <img src="/tabla600x400.png">
</div>

y en el estilo del <div> dejaré lo siguiente:

div.crop-img {
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

Al darle al <div> un ancho fijo: width:150px, podemos perfectamente centrarlo usando el margen en auto: margin: 0 auto. Overflow: hidden nos ocultará la parte de la imagen que sobrepase las dimensiones del <div>. Finalmente para que el <div> se redimensione dependiendo del dispositivo, añado: max-width: 100%. Y las dos últimas te pueden solucionar algún inconveniente.

Las propiedades de la imagen

Las 2 principales propiedades fijas de la imagen son estas:

div.crop-img img {
  display: block;
  max-width: none !important;
}

Display: block es importante para evitar márgenes misteriosos en HTML5 y max-width: none también es muy importante porque en los diseños web responsive se suele utilizar: img{max-width:100%} y esto hay que anularlo.

Para que la imagen ocupe todo el ancho del <div> que son 150 px, debemos darle a la imagen un ancho. Además se lo tenemos que dar en tantos por cien (%) para que sea adaptable. Como hay 4 imágenes y cada imagen es el 100% = 150px de su contenedor que es el <div>, podemos dar a la imagen un ancho de 400%. Es muy lógico, ¿lo entiendes? Si no lo entiendes, vuelve a leer este párrafo.

Por lo tanto el código HTML queda, de momento, así:

<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%;" src="/tabla600x400.png">
</div>

Y finalmente solo queda usar márgenes negativos para ver el recorte perfecto. Para ver bien la primera imagen 1 debemos recortar un margen inferior de 200 píxeles que son el largo del número 5 y, por supuesto, no pueden ser en píxeles sino en tantos por cien (%). Entonces... ¿200 píxeles a cuántos % corresponde? Si te fijas en el párrafo amarillo anterior, verás que he llegado a la conclusión de que:

100% = 150px

Por lo tanto, realizando una sencilla regla de 3, llego a la conclusión de que:

100% - 150px
 X%  - 200px

X = 2000/15 = 133.33%. Así que el anterior código HTML queda así:

<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%; margin:0 0 -133.3% 0;" src="/tabla600x400.png">
</div>

Y de esta forma tan simple ya funciona en la mayoría de navegadores: IE7-IE11, Firefox, Chrome, Opera, Safari, lo he probado también en varios dispositivos iPhone y en algún navegador con Android. Incluso se ve correctamente en Kompozer.

El obsoleto IE6

Sin embargo, el obsoleto navegador IE6 hace cosas raras con los márgenes top y bottom en %, así que puedes realizar un simple HACK (si te interesa que el código sea compatible con este navegador):

<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%; margin:0 0 -133.3% 0; _margin-bottom:-200px;" src="/tabla600x400.png">
</div>

Además en IE6 no funciona tampoco max-width, por eso el margen lo pongo en píxeles (-200px) ya que como tampoco se va a redimensionar el <div>, ¿para qué voy a complicarme la vida buscando un % ilógico en un navegador obsoleto?

Ahora toca hacer las pruebas con la imagen del inicio del artículo. Te voy a escribir primeramente el código que he usado en cada una de ellas y seguidamente el resultado REAL para que puedas comprobar cómo se ve desde tu Sistema Operativo y navegador.

El código en acción

IMPORTANTE: Debes saber que en esta web ya he incorporado el código CSS en el archivo de estilo de la web. Así que debes saber que lo siguiente ya está añadido -y tú debes hacer lo mismo, si no no te funcionará-:

div.crop-img {
  max-width: 100%;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
div.crop-img img {
  display: block;
  max-width: none !important;
}

Para comprobar el resultado, observa esta página desde varios dispositivos.

Parte 1

Código HTML:
<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%; margin:0 0 -133.3% 0;_margin-bottom:-200px;" src="/tabla600x400.png">
</div>

Resultado:

Parte 2

Código HTML:
<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%; margin:0 0 -133.3% -100%;_margin-bottom:-200px;" src="/tabla600x400.png">
</div>

Resultado:

Parte 3

Código HTML:
<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%; margin:0 0 -133.3% -200%;_margin-bottom:-200px;" src="/tabla600x400.png">
</div>

Resultado:

Parte 4

Código HTML:
<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%; margin:0 0 -133.3% -300%;_margin-bottom:-200px;" src="/tabla600x400.png">
</div>

Resultado:

Parte 5

Código HTML:
<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%;margin: -133.3% 0 0 0; _margin-top:-200px;" src="/tabla600x400.png">
</div>

Resultado:

Parte 6

Código HTML:
<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%;margin: -133.3% 0 0 -100%; _margin-top:-200px;" src="/tabla600x400.png">
</div>

Resultado:

Parte 7

Código HTML:
<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%;margin: -133.3% 0 0 -200%; _margin-top:-200px;" src="/tabla600x400.png">
</div>

Resultado:

Última parte: Parte 8

Código HTML:
<div class="crop-img"  style="width: 150px;">
  <img style="width: 400%;margin: -133.3% 0 0 -300%; _margin-top:-200px;" src="/tabla600x400.png">
</div>

Resultado:

Si quieres ver otro ejemplo real donde los valores matemáticos son más complejos, puedes visitar este enlace sobre cómo crear efecto nieve en GIMP.

Como consejo para que en tus tutoriales sea más sencillo buscar los valores matemáticos, es recomendable hacer las imágenes de un tamaño idéntico (como las partes 1 a 8 de este tutorial).