Bueno, cansado de ver cientos de Scripts para ajustar un fondo ó imagen al tamaño de la ventana del navegador, decidí ponerme manos a la obra. Todos conocemos las enormes Librerías (100-200Kb.) para tal menester… Algunos sabemos que se pueden conseguir resultados más que aceptables con muy pocos recursos: 440 bytes (la mitad de 1Kb.). Pues sí, con 100 veces menos y un poco de dedicación, está demostrado aquí:
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta http-equiv=”imagetoolbar” content=”no” />
<title>Resize Fluid Image</title>
<style type=”text/css”>
body {
background: #000000;
margin: 0px;
padding: 0px;
overflow: hidden;
}
img {
width: 100%;
z-index: -2;
// (Quitar este comentario para mantener el tamaño de la imagen por defecto.) max-width: 100%;
}
</style>
</head>
<body>
<img src=”bg_img.jpg” />
</body>
</html>
Lo he simplificado al máximo para ver el efecto deseado; no obstante, se puede adaptar para diferentes propósitos: fondo de Web Site, tamaño de imagen según pantalla, etc. La imaginación es el único límite…
