Supersized

Para la última actualización que hice de la web de MUT Design querían que una imagen ocupara completamente la pantalla. Para esto me puse a buscar por internet algún plugin para jQuery dando con Supersized, un sencillo plugin que permite hacer precisamente esto.

Puse un div después de cada una de las imágenes para que, poniéndole un postion:absolute este quedara por encima de la imagen y pudiera ahí poner texto o lo que hiciera falta.

Una de las cosas que me llevó un poco de cabeza fue como saber si la pantalla con la que se estaba viendo la página era cuadrada o rectangular, ya que entonces la imagen debería de cambiar ya que su ratio también cambiaba. Para ello hice dos copias de las imágenes, unas con ratio 1280×960 y otras con ratio 1280×645. Luego mediante jQuery detecto el ratio a aplicar de acuerdo a la pantalla con la que se está visualizando la web, cargando unas imágenes u otras.

El código utilizado para realizar el cambio de las imágenes es este:

En este código lo que hago es cambiar el atributo src de las imágenes haciendo que apunte a una imagen en un subdirectorio donde están las imágenes iniciales, con lo que dependiendo del ratio se cargan unas u otras.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *