Uno de mis quebraderos de cabeza últimamente es el CSS. Con la llegada de nuevos dispositivos la necesidad imperativa de mostrar correctamente las imágenes en nuestros sitios web se hace cada día mas presente. Actualmente según mi analytics las visitas de un equipo de sobremesa o portátil apenas alcanzan un 50%. El resto son móviles o tablets. El caso es que uno de mis dolores de cabeza era mantener imágenes con su «relación de aspecto» y que no se te «descojone» toda la web… Si solo buscas respuesta y quieres evitar el «ladrillo» de texto aquí tienes varios ejemplos funcionando y el código de ejemplo que ire modificando…
¿Porque no usar Imagemagick o similar?
Bueno, lo suyo lógicamente es usarlo y crear con el nuestros preciosos thumbnails de un cierto tamaño y aspecto. El problema aparece cuando decidas cambiar de diseño y tienes algún que otro GB (En el mejor de los casos) acumulado después de algunos años con el proyecto… ¡Siempre hay solución! Pasemos algún script que nos redimensione TODAS las imágenes a nuestro thumbnail deseado y quememos nuestro servidor junto con el datacenter en el proceso… Lógicamente seria posible, si lo haces bien. Pero mientras tanto, puedes apañarte con el CSS.
Recordemos también que los usuarios generalmente no entienden palabras como «aspect ratio», pixel e incluso tamaño. Por eso nos podemos encontrar con imágenes de 200Mb, 5Kb o alguna otra sorpresa que debemos evitar subir a nuestro servidor.
¿Como mantener la relación de aspecto de una imagen?
Como ya he comentado el código fuente esta aquí con varios ejemplos, por si quieres hacer Copy&Paste. Pero por si acaso te lo explico un poco. Lo que tienes que hacer es al contenedor de la imagen dar la propiedad:
#loquesea {
position: relative;
height: 0px;
padding-bottom: 75%;
}
El truco del almendruco consiste en dar la altura un 0 pixeles y al padding un porcentaje que se obtiene al dividir nuestra relación de aspecto… 16×9 (9/16 56,25%), 4×3 (3 entre 4 igual a 75%)… con lo cual conseguimos dar a nuestro contenedor de la imagen una relación de aspecto. Algo que no podemos conseguir aplicando CSS solo a la imagen…
#loquesea img {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
Con esto ultimo centramos nuestra imagen dentro del contenedor… La explicación es algo básica y basada en el articulo original que encontraras aquí… pero tocando los valores las posibilidades son bastante amplias para que puedes adaptar todas las imágenes a un diseño especifico sin que el sitio web se descuádre. Para mi es algo que estaba buscando mucho tiempo y lo que subí a mi github para poder utilizarlo. Los frameworks que utilizamos todos como bootstrap se quedan bastante cortos para estos casos…
Disculpad por la escueta explicación, espero que os sirva para algo… si después tengo algo de tiempo la mejoro un poco.
