Imagen ajustada con proporción

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. Pues sí, casi 100 veces menos y un poco de dedicación, está demostrado aquí:

<!DOCTYPE html>

<html>
<head>
<style type=”text/css”>
#bg {
position:absolute;
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:0px;
min-width:100%;
width:auto !important;
width:100%;
min-height:100%;
height:auto !important;
height:100%;
z-index:-100;
}
</style>
</head>
<body>
<img src=”fondo.jpg” id=”bg” alt=”” title=””>
</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. Ah, es compatible con varios disposivos y navegadores, incluido IExplorer.

Imagen ajustada con proporción

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s