antes de nada gracias por dedicar unos instantes al problemilla que me ocupa. Nunca antes había escrito al foro y normalmente intento recurrir a los colegas cuando estoy atascado con algo.
El asunto en cuestión:
estoy haciendo una web, en la que cambian las imagnes de fondo. Estas aparecen con 100% de ancho, y mi deseo es que además estas aparezcan centradas verticalmente. Además las imagenes se deben redimensionar cuando se redimensiona la ventana del navegador.
Esto lo hago de la siguiente manera: inserto la imagen en una capa que ocupa toda la pantalla y con el overflow hidden e inserto la imagen con width a 100%. Solo me falta centrarla verticalmente. La propiedad Vertical-aling no sirve. Y las tipicas soluciones para centrar una imagen en el centro de la pantalla tampoco, porque las imagnes son muy grandes, y si exceden el tamaño vertical de la ventana se alinean arriba.
A un colega se le ocurrio una idea para arreglar el problemilla con js e hicimos la siguiente funcion:
function ajustarImagen(){Siendo "contenido" la imagen insertada y "fondo" la capa en la que está insertada. Que se ejecuta cuando:
if (navigator.appName=="Netscape"){
altoNavegador=window.innerHeight;
}else{
altoNavegador=document.body.offsetHeight;
}
altoImagen=document.getElementById("contenido").he ight;
alto=Math.round((altoImagen-altoNavegador)/2);
document.getElementById("fondo").style.top='-' + alto + 'px';
document.getElementById("fondo").style.height=(alt oNavegador + alto) + 'px';
}
<body onResize="ajustarImagen()" onload="ajustarImagen()">Esto funciona perfectamente en Mozilla y Chrome, pero no en IE, que ya no es que alinee la imagen como le da la gana, si no que no sé a donde me la manda y desaparece.
Espero haber sido bastante claro, podeis ver el ejemplo entero aquí:
Código:
Muchas gracias a todos. <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<SCRIPT>
function ajustarImagen(){
if (navigator.appName=="Netscape"){
altoNavegador=window.innerHeight;
}else{
altoNavegador=document.body.offsetHeight;
}
altoImagen=document.getElementById("contenido").height;
alto=Math.round((altoImagen-altoNavegador)/2);
document.getElementById("fondo").style.top='-' + alto + 'px';
document.getElementById("fondo").style.height=(altoNavegador + alto) + 'px';
}
</SCRIPT>
<style type="text/css">
<!--
* {
margin: 0px;
}
#fondo {
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;
visibility:inherit;
vertical-align:middle;
}
-->
</style>
</head>
<body onResize="ajustarImagen()" onload="ajustarImagen()">
<div id="fondo"><img src="oso.jpg" width="100%" id="contenido" /></div>
</body>
</html>
