
16/07/2007, 00:47
|
 | Moderador extraterrestre | | Fecha de Ingreso: diciembre-2001 Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años, 2 meses Puntos: 61 | |
Re: ajustar imagen proporcionalmente 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>
__________________ Cómo escribir
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
Última edición por KarlanKas; 16/07/2007 a las 01:08 |