ajustar imagen proporcionalmente

rumo · #1 (**permalink**) 15/07/2007, 18:12

hola caballeros, tengo una consulta:

tengo un div de tamaño x,y y quiero poner una imagen dentro que se ajuste a este tamaño maximo

me gustaria saber como puedo hacer para redimensionar la imagen de manera proporcinal si esta es mayor que el ancho o el alto o ambos para que quede dentro del div y no se salga.

si alguien me da una mano se lo agradeceria he encontrado algunos codigos pero no puedo ajustarlo a mis necesidades la idea es hacer algo como el efecto del lighbox 2.0 de la imagen que se ajusta pero puede tener una ancho maximo y un alto maximo

bueno eso. salu2.

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>

rumo · #3 (**permalink**) 16/07/2007, 01:45

me quedan unas dudas con el codigo que pones esto redimensiona la imagen en el ancho si se pasa de 300 y luego la devuelve cierto?

y si se pasa en el alto de 200 la redimensiona y la devuelve pero que pasa si se pasa en el ancho "y" en el alto.

lo que pasa es que encontre una solucion que encuentro poco optima y me interesa saber si tu codigo podria ser mejor que el que logre yo

Código HTML:

var widthCurrent = 300
var heightCurrent = 300

var ratio_a = 1;
var ratio_b = 1;
if(FotoPreload.width > widthCurrent ){
    ratio_a = ( widthCurrent / FotoPreload.width );
}
if(FotoPreload.height > heightCurrent ){
    ratio_b = ( heightCurrent / FotoPreload.height );
}
if(ratio_a>ratio_b) var ratio = ratio_b;
else if(ratio_b>ratio_a) var ratio = ratio_a;
else var ratio = ratio_a;

lo que hago yo es crear dos proporciones una para en caso de pasarse en el ancho y una en caso de pasarse en el alto (ratio_a, ratio_b)

y luego redimensiono la imagen segun la menor proporcion para asegurarme que no se pase en el ancho ni en el alto, en caso de que se pase en alguno.

gracias por responder, salu2

KarlanKas · #4 (**permalink**) 19/07/2007, 01:27

[fot=courier new]Si redimensionas el ancho también redimensiona el alto.Y si no redimensiona el ancho porque está dentro de los márgenes pero la altura se sobrepasa redimensiona la anchura y la altura de una forma similar a lo que hace tu script. Lo cierto es que si redimensiona la anchura y aun así la altura es excesiva no lo corrige. Déjame mirar y te digo.[/font]