imagen que se adapta al documento

fran_paris · 02-jul-2012, 02:23

Hola he estado tratando de hacer que la imagen de mi logo se adapte a la altura de la pagina y segun esta altura calcule en ancho de la imagen para que esta siempre este proporcional

vi que esto se podia hacer con jquery

pero no me ha resultado

aqui va la copia del documento html, a ver que me pueden decir

desde ya gracias

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>3dAtelier</title>
<head>

<script src="jquery-latest.js"></script>
<script>

var alto= $(document).height();
var ancho = alto*4.35

</script>

</head>
<body>

<img src="images/logo.jpg" width="ancho" height="alto">

</body>
</html>

spahostings · 02-jul-2012, 11:32

Hola no se si lo que quieres es esto : lo he echo sin Jquery , con javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>3dAtelier</title>
<head>


<script type="text/javascript">

function calcular_altura() {

if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
return winH;
}

function cambiar_logo () {
var alto= calcular_altura();
var ancho = parseFloat(alto)*4.35;
ancho=parseInt(ancho);
document.getElementById("imagen_logo").width=ancho ;
document.getElementById("imagen_logo").height=alto ;
}
</script>

</head>
<body onresize="cambiar_logo()" onload="cambiar_logo()">
<img id="imagen_logo" src="images/logo.jpg" width="100px" height="25px" alt="Logo" />

</body>
</html>

fran_paris · 03-jul-2012, 11:54

Muchas gracias, eso era exactamente lo que necesitaba.

De verdad te lo agradezco mucho

Saludos

FenixHosting · 05-sep-2012, 04:45

si aun necesitas ayuda dimelo...