(Creador: Freddy Torres.
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:
¿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:
¿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.
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.
