Redimensiona imágenes automáticamente con JavaScript

Redimensiona imágenes automáticamente con Fluid Images

Ethan Marcotte había publicado en ALA un artículo sobre Grids fluidos (ancho no fijo), los cuales no quedaban muy bien si introducíamos imágenes dentro de ellos. Por defecto, una imagen mantiene su tamaño dado, el que puede ser de 500px, 100px u 800px; pero ¿cómo podemos hacer para que la imagen se adapte a cualquier ancho automáticamente?

El ha publicado un pequeño script que crea imágenes fluidas. Resumiendo, este script analiza nuestra página web y cambia las imágenes por un GIF transparente, y le aplica la propiedad AlphaImageLoader a cada una. Luego, cuando la ventana es redimensionada, el script automáticamente recalcula proporcionalmente el alto y ancho de las imágenes, y las redimensiona. Lo podemos ver en acción desde el siguiente enlace.

Demo | Fluid Images
Descargar | Fluid Images (JavaScript)
Vía | webappers

Deja tu comentario

El contenido de este campo se mantiene privado y no se mostrará públicamente.
  • Las direcciones de las páginas web y las de correo se convierten en enlaces automáticamente.
  • Etiquetas HTML permitidas: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato