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
Si te gustó este artículo también te gustará...
