Foros del Web - Ver Mensaje Individual

KarlanKas · #2 (**permalink**) 16/07/2007, 00:47

Si sabes el tamaño del div es bastante fácil:

Código:

<html>
<head>
<style>
#continente{
width:300;
height:200;
border:solid 1px black;
overflow:hidden;
}
</style>
	<title>Untitled</title>
	
	<script>
	function redimension(esta){
	i=document.images[esta];
	if(i.width>300){
	i.width=300
	}
	}
	</script>
</head>

<body onload="redimension('imagen')">
<div id="continente">
<img name="imagen" src="http://www.manuelymar.net/el_fumadero/fotosblog/pajaro.jpg" />
</div>

</body>
</html>

La imagen del ejemplo es mayor que el tamaño del div. El script lo detecta y redimensiona la anchura (las imágenes siempre se redimensionan proporcionalmente por lo que no hace falta indicar la altura).

Espero que te sirva...

Lo he cambiado un poco:

Código:

<html>
<head>
	<title>Untitled</title>
	<style>
	#continente{
		width:300;
		height:200;
		border:solid 1px black;
		overflow:hidden;
		text-align:center;
	}
	</style>
	
	<script>
	var yata=0;
	function cargar(esta,aquella){
	yata=0;
	i=document.images[esta];
	i.style.visibility='hidden';
	if(aquella){
	i.src=aquella;
	setTimeout('redimensionar(i.name)',700);
	}
	}
	function redimensionar(i){
	i=document.images[i];
	if(i.width>300){
	i.width=300;
	yata=1
	}
	if(i.height>200 && yata==0){
	prop=200*(i.width/i.height);
	i.height=200;
	i.width=prop;
	}
	i.style.visibility='visible';
	}
	</script>
</head>

<body onload="redimensionar('imagen')">
<div id="continente">
<img onclick = "cargar('imagen','http://www.marakka2000.com/pictures/2456.jpg')" name = "imagen" src = "http://www.manuelymar.net/el_fumadero/fotosblog/pajaro.jpg" />
</div>

</body>
</html>