Liquid Page and Resizeable Background Image (Páginas Líquidas)

¿Qué se quiere lograr?

Hace un par de meses se presento un requerimiento por parte de un cliente. Deseaba poder mostrar sus fotos en pantalla, y que las mismas ocuparan lo largo y ancho del explorador en su totalidad. Incluido esta el requerimiento de evitar que la misma se deforme, porque de no ser así, bastaría con colocar un código como este:

El problema con el código anterior es que no se preserva el radio de aspecto de la imagen de fondo (http://en.wikipedia.org/wiki/Aspect_ratio_(image)), por ejemplo: Supongamos que tenemos una imagen de tamaño 1280 x 800 (ar: 16:9 universal to high-definition television and European digital television), y nuestro explorador se encuentra en resolución 800 x 600 (ar: 4:3 universal for standard-definition video formats). El resultado sería una imagen deformada, ajustada de su tamaño original hacia 800 x 600, obviamente no es el resultado deseado.

¿Cómo lo solucioné?

La solución requiere realizar un cálculo en tiempo real que detecte el tamaño actual del explorador, y escale la imagen proporcionalmente a la mayor de las dimensiones del mismo. (WTF…?). Sencillo, que no deforme la foto, y que ocupe la mayor cantidad de pantalla posible.

¿Qué herramientas me apoyan?

Obviamente se necesitan algunas librerías de javascript que permitan gestionar y consultar las dimensiones del explorador. Aquí entra el grandioso JQUERY FRAMEWORK, mas específicamente la librería “jquery.dimensions.min.js”, que permite realizar un par de operaciones escenciales:

- $(window).width();
- $(window).height();

Por consiguiente, es necesaria la librería del propio framework “jquery-1.4.2.min.js”

Luego el algoritmo va como sigue……

El HTML:

********* IMPORTANTE **********
El identificador de la imagen (id=”liquidImage”) debe ser tomado en cuenta para el javascript que sigue.


EL JAVASCRIPT:

$(document).ready(function() {
Liquify();
$(window).bind("resize", function() {
Liquify();
});
});

Function Liquify(){
// dimensiones del explorador
var $winwidth = $(window).width();
var $winheight = $(window).height();

// dimensiones originales de la imagen
var $x = 1024; // cambiar de acuerdo al requerimiento o pasar por parametro
var $y = 768; // cambiar de acuerdo al requerimiento o pasar por parametro
var $dx = 4; // radio de aspecto x
var $dy = 3; // radio de aspecto y

// algoritmo
var $p = $winwidth / $dx;
var $coef = 0;
var $newwidth = 0;
var $newheight = 0;

// calculamos la mayor de las dimensiones del explorador
if (($winheight / $dy) > $p) {
// height predomina
$coef = $winheight / $y;
$newheight = $winheight;
$newwidth = $x * $coef;
} else {
// width predomina
$coef = $winwidth / $x;
$newwidth = $winwidth;
$newheight = $y * $coef;
}

// seteamos las dimensiones deseadas a la imagen de background
$("#liquidImage").attr({
width: $newwidth
});
$("#liquidImage").attr({
height: $newheight
});
}

¿Qué defectos tiene?

1. Las variables de dimensiones originales de la imagen están hard-coded en el javascript, y deben ser cambiadas de acuerdo al requerimiento. Lo ideal es hacer un pluing de jquery que reciba estas variables por parámetro, y tenga algunas seteadas por defecto.