[CSS] Imagen en porcentaje

renerf · 31-Jul-2006, 01:20 PM

¿Es posible que usando CSS se pueda poner una imagen con su tamaño en porcentaje en base a su tamaño real y no en base al espacio disponible del objeto que lo contiene?

por ejemplo: si a una imagen de 100 x 100 pixeles le ponemos el width:50%, sera el 50% del ancho de la pantalla, no el 50% de su tamaño que serian 50 pixeles.

thediablo · 31-Jul-2006, 01:24 PM

Osea... Crear un Thumbnail de la foto grande?

Danger · 31-Jul-2006, 01:40 PM

Oye renerf, pero segun mi criterio, eso no seria una buena o la mejor forma de tratar una minuatura de una imagen...

1.- La imagen se distorciona
2.- El peso sera el mismo ( es decir, si quieres redimencionar una imagen de 1000px jpg de unos 120kb, a 100px por ejemplo, la redimension es lo de menos, pero el tamaño seguiria siendo el mismo y se distorcionaria.. )
3.- Ademas te dá pocas posibilidades de condicionar la accion, EJ: tamaño, height de 100 pero que no pase width de 125px.... etc etc.

PHP te servira de mucho para tu caso, aqui una liga de una clase escrita en php para generar miniaturas http://phpthumb.sourceforge.net/

Saludos !

renerf · 31-Jul-2006, 04:38 PM

no, solamente requiero hacer mas pequeña en tamaño por las siguientes razones:

Es para un sistema de intranet, por lo que el peso de la imagen no importa, pues se accesa por red local
La imagen no es tan grande, maximo 500 pixeles de ancho o menos, por lo que nunca excedera el ancho de la pagina
La imagen esta en una base de datos en oracle, por lo que no es conveniente guardar una version normal y una minuatura. esto significaria un campo extra.

Ese es mi problema, que podria especificar un acho fijo en pixeles para la imagen, pero como son varias y de ancho variable (menos de 500 pixeles) algunas se ve deformadas en su relacion alto-ancho.

ray_einteractivo · 31-Jul-2006, 05:49 PM

estoy de acuerdo con don Danger "La imagen se distorciona" cual es la finalidad o que?

Danger · 31-Jul-2006, 05:49 PM

1.- Checaste la clase php que te pase ? esa clase no crea un archivo nuevo en minuatura, muestra el mismo archivo de imagen pero la redimenziona y la imprime, basandose en la imagen origina, sin crear una nueva.

2.- Aunque la iamgen no la redimensiones por mucha diferencia se vera mal, prueba con la clase y compara, notara la diferencia.

Saludos ! ñ_ñ

renerf · 31-Jul-2006, 05:58 PM

estoy de acuerdo, no hay comparacion entre redimiesionarla directamente en el navegador y hacerlo en un archivo o proceso aparte, pues el segundo método aplicara algun "suavizado" (anti-aliasing).

ok, nada mas dejame verificar si la version del oracle Http server (que basicamente es Apache) trae por default el soporte para arhcivos php.

Gracias

renerf · 31-Jul-2006, 06:10 PM

aunque por experiencia propia no recomiendo agregar procesos "extra", como en este caso la generacion de una miniatura mediante php, a un servidor de base de datos...
Se requiere toda la potencia del procesador para evitar problemas con las transacciones de la Base de datos.
por eso preguntaba por un metodo mas simple, como hacer el cambio de tamaño en la maquina del cliente mediante CSS,

.

pero, pues si no se puede, utilizaremos la solucion mediante php.

Ademas por lo que veo, la clase que me indicas requiere que se especifique un ancho o alto en pixeles, no en porcentaje, por lo que no se ajusta a lo que originalmente requiero.

Danger · 31-Jul-2006, 07:36 PM

Hola:

Mira si quieres redimensionar por porcentaje, tambien se puede con la libreria, pero francamente como no lo he requerido no me he metido mas alla ñ_ñ... pero como solucion rapida se me ocurre algo como lo siguiente:

1.- obtienes el ancho y altura de tu imagen asi:

Código PHP:


			
<?php

$t = getimagesize ("imagen.jpg");

echo $t[2];

echo $t[3];

?>

el resultado es una cadena asi: width="xx" height="xx" si te sirve asi bien, si no, ps simplemente le haces un explot a las comillas, para obtener el valor en int.

2.- ahora que tienes las medidas tal cual, puedes jugar un poco con las matematicas, por ejemplo si requieres que la altura sea del 20% de la altura neta, ps la altura neta la divides entre 5, y el resultado sera el valor que tu estaras buscando.

ahi esta la solucion, ahora, si son muchas imagenes, ps ya te habientas un bucle y lixto.

Saludos man !

renerf · 01-Aug-2006, 08:53 AM

Je je, bueno, gracias.
El codigo que me propones tendria que meterlo en la pagina que manda a llamar a la imagen, no?, pero resulta que la pagina que muestra esta imagen (ademas de otros datos), no esta en php, es generada dinámicamente con pl/sql, por lo que no es posible insertar este tipo de etiquetas.
La verdad no es tan importante que la imagen se "distorsione" un poco, de verdad que es preferible que el cambio de tamaño se haga en el navegador.
de hecho tengo una solucion en javascript, pero me parece que si existiera alguna forma mediante CSS, seria mas recomendable:

HTML Code:

<head>
<script language="JavaScript" type="text/javascript">
  function imageResize (imagen){
    var porcentaje = .5;
    imagen.width = imagen.width * porcentaje;
  }
</script>
</head>
<body>
  <img src="foto.jpg" id="foto" onload="imageResize(this)"/>
</body>
</html>

Ademas, a veces se nota ligeramente el cambio de tamaño, se alcanza a ver el tamaño original e inmediatamente despues la imagen ya redimensionada.

Danger · 01-Aug-2006, 09:17 AM

Que onda renerf, okas ps como tu te acomodes we ñ_ñ yo solo decia... de rapidin te contesto lo que me dices de las equitetas...

No es necesario que tu pagina generada sea PHP, asi sea html o pl o lo que sea puedes utilizar esta libreria, claro, miestras el server tenga el PHP. EJ:

Código PHP:


			
<img src="libreria.php?src=tuimagen.jpg&w=xx&h=xx">

donde xx podria ser tu valor que quieres...

Ahora.. estaba checando la clase y en el archivo phpthumb.class.php hay bastantes variables publicas que puedes utilizar en GET.. para la imagen..

Quote:

var $src = null; // SouRCe filename
var $new = null; // NEW image (phpThumb.php only)
var $w = null; // Width
var $h = null; // Height
var $wp = null; // Width (Portrait Images Only)
var $hp = null; // Height (Portrait Images Only)
var $wl = null; // Width (Landscape Images Only)
var $hl = null; // Height (Landscape Images Only)
var $ws = null; // Width (Square Images Only)
var $hs = null; // Height (Square Images Only)
var $f = null; // Format
var $q = 75; // jpeg output Quality
var $sx = null; // Source crop top-left X position
var $sy = null; // Source crop top-left Y position
var $sw = null; // Source crop Width
var $sh = null; // Source crop Height
var $zc = null; // Zoom Crop
var $bc = null; // Border Color
var $bg = null; // BackGround color
var $fltr = array(); // FiLTeRs
var $goto = null; // GO TO url after processing
var $err = null; // default ERRor image filename
var $xto = null; // extract eXif Thumbnail Only
var $ra = null; // Rotate by Angle
var $ar = null; // Auto Rotate
var $aoe = null; // Allow Output Enlargement
var $far = null; // Fixed Aspect Ratio
var $iar = null; // Ignore Aspect Ratio
var $maxb = null; // MAXimum Bytes
var $down = null; // DOWNload thumbnail filename
var $md5s = null; // MD5 hash of Source image
var $file = null; // >>deprecated, do not use<<

como sea, ahi esta otra alternativa

Saludos !

renerf · 02-Aug-2006, 06:26 PM

Tons que? no se puede por CSS?

FallenAngel · 02-Sep-2006, 01:12 AM

en la facu vi como hacer que se vean al 50 porciento pero en php, y veo que no es lo que buscas, se tiene que poder en CSS, hay que investigar, si descubro te aviso

pixeluno · 02-Sep-2006, 02:40 AM

orale ahi esta en san google:
link
eso era lo que pedias renerf? si le das clcik al primer resultado te debe aparecer este: link

Saludos

renerf · 04-Sep-2006, 09:31 AM

pues parece que si... deja lo analizo..

31-Jul-2006, 01:20 PM	#1
renerf Miembro Registrado: May-2006 Location: Mexico Posts: 83	[CSS] Imagen en porcentaje ¿Es posible que usando CSS se pueda poner una imagen con su tamaño en porcentaje en base a su tamaño real y no en base al espacio disponible del objeto que lo contiene? por ejemplo: si a una imagen de 100 x 100 pixeles le ponemos el width:50%, sera el 50% del ancho de la pantalla, no el 50% de su tamaño que serian 50 pixeles. Editado por renerf en 31-Jul-2006 a las 01:23 PM.

31-Jul-2006, 01:24 PM	#2
thediablo Administrator Registrado: April-2006 Location: Monterrey, Mexico Posts: 400	Osea... Crear un Thumbnail de la foto grande? __________________ [ Disque Portafolio +++ Mi Blog +++ Las Fotos ]

31-Jul-2006, 04:38 PM	#4
renerf Miembro Registrado: May-2006 Location: Mexico Posts: 83	no, solamente requiero hacer mas pequeña en tamaño por las siguientes razones: Es para un sistema de intranet, por lo que el peso de la imagen no importa, pues se accesa por red local La imagen no es tan grande, maximo 500 pixeles de ancho o menos, por lo que nunca excedera el ancho de la pagina La imagen esta en una base de datos en oracle, por lo que no es conveniente guardar una version normal y una minuatura. esto significaria un campo extra. Ese es mi problema, que podria especificar un acho fijo en pixeles para la imagen, pero como son varias y de ancho variable (menos de 500 pixeles) algunas se ve deformadas en su relacion alto-ancho.

31-Jul-2006, 05:49 PM	#5
ray_einteractivo Miembro Activo Registrado: June-2006 Location: México Posts: 128	estoy de acuerdo con don Danger "La imagen se distorciona" cual es la finalidad o que? __________________ www.creativosymas.net / www.einteractivo.com

31-Jul-2006, 06:10 PM	#8
renerf Miembro Registrado: May-2006 Location: Mexico Posts: 83	aunque por experiencia propia no recomiendo agregar procesos "extra", como en este caso la generacion de una miniatura mediante php, a un servidor de base de datos... Se requiere toda la potencia del procesador para evitar problemas con las transacciones de la Base de datos. por eso preguntaba por un metodo mas simple, como hacer el cambio de tamaño en la maquina del cliente mediante CSS, . pero, pues si no se puede, utilizaremos la solucion mediante php. Ademas por lo que veo, la clase que me indicas requiere que se especifique un ancho o alto en pixeles, no en porcentaje, por lo que no se ajusta a lo que originalmente requiero. Editado por renerf en 31-Jul-2006 a las 06:15 PM.

31-Jul-2006, 01:40 PM	#3
Danger Miembro Registrado: May-2006 Location: México Posts: 79	Oye renerf, pero segun mi criterio, eso no seria una buena o la mejor forma de tratar una minuatura de una imagen... 1.- La imagen se distorciona 2.- El peso sera el mismo ( es decir, si quieres redimencionar una imagen de 1000px jpg de unos 120kb, a 100px por ejemplo, la redimension es lo de menos, pero el tamaño seguiria siendo el mismo y se distorcionaria.. ) 3.- Ademas te dá pocas posibilidades de condicionar la accion, EJ: tamaño, height de 100 pero que no pase width de 125px.... etc etc. PHP te servira de mucho para tu caso, aqui una liga de una clase escrita en php para generar miniaturas http://phpthumb.sourceforge.net/ Saludos !

31-Jul-2006, 05:58 PM	#7
renerf Miembro Registrado: May-2006 Location: Mexico Posts: 83	estoy de acuerdo, no hay comparacion entre redimiesionarla directamente en el navegador y hacerlo en un archivo o proceso aparte, pues el segundo método aplicara algun "suavizado" (anti-aliasing). ok, nada mas dejame verificar si la version del oracle Http server (que basicamente es Apache) trae por default el soporte para arhcivos php. Gracias

31-Jul-2006, 07:36 PM	#9
Danger Miembro Registrado: May-2006 Location: México Posts: 79	Hola: Mira si quieres redimensionar por porcentaje, tambien se puede con la libreria, pero francamente como no lo he requerido no me he metido mas alla ñ_ñ... pero como solucion rapida se me ocurre algo como lo siguiente: 1.- obtienes el ancho y altura de tu imagen asi: Código PHP: `<?php $t = getimagesize ("imagen.jpg"); echo $t[2]; echo $t[3]; ?>` el resultado es una cadena asi: width="xx" height="xx" si te sirve asi bien, si no, ps simplemente le haces un explot a las comillas, para obtener el valor en int. 2.- ahora que tienes las medidas tal cual, puedes jugar un poco con las matematicas, por ejemplo si requieres que la altura sea del 20% de la altura neta, ps la altura neta la divides entre 5, y el resultado sera el valor que tu estaras buscando. ahi esta la solucion, ahora, si son muchas imagenes, ps ya te habientas un bucle y lixto. Saludos man !

01-Aug-2006, 08:53 AM	#10
renerf Miembro Registrado: May-2006 Location: Mexico Posts: 83	Je je, bueno, gracias. El codigo que me propones tendria que meterlo en la pagina que manda a llamar a la imagen, no?, pero resulta que la pagina que muestra esta imagen (ademas de otros datos), no esta en php, es generada dinámicamente con pl/sql, por lo que no es posible insertar este tipo de etiquetas. La verdad no es tan importante que la imagen se "distorsione" un poco, de verdad que es preferible que el cambio de tamaño se haga en el navegador. de hecho tengo una solucion en javascript, pero me parece que si existiera alguna forma mediante CSS, seria mas recomendable: HTML Code: <head> <script language="JavaScript" type="text/javascript"> function imageResize (imagen){ var porcentaje = .5; imagen.width = imagen.width * porcentaje; } </script> </head> <body> <img src="foto.jpg" id="foto" onload="imageResize(this)"/> </body> </html> Ademas, a veces se nota ligeramente el cambio de tamaño, se alcanza a ver el tamaño original e inmediatamente despues la imagen ya redimensionada. Editado por renerf en 01-Aug-2006 a las 08:56 AM.

02-Aug-2006, 06:26 PM	#12
renerf Miembro Registrado: May-2006 Location: Mexico Posts: 83	Tons que? no se puede por CSS?

02-Sep-2006, 01:12 AM	#13
FallenAngel Miembro Registrado: June-2006 Location: Argentina Posts: 59	en la facu vi como hacer que se vean al 50 porciento pero en php, y veo que no es lo que buscas, se tiene que poder en CSS, hay que investigar, si descubro te aviso

02-Sep-2006, 02:40 AM	#14
pixeluno Miembro Activo Registrado: May-2006 Location: Los Cabos, México Posts: 247	orale ahi esta en san google: link eso era lo que pedias renerf? si le das clcik al primer resultado te debe aparecer este: link Saludos __________________ Siiiimoooon! Editado por pixeluno en 02-Sep-2006 a las 02:42 AM.

04-Sep-2006, 09:31 AM	#15
renerf Miembro Registrado: May-2006 Location: Mexico Posts: 83	pues parece que si... deja lo analizo..

Herramientas
Versión para imprimir Enviar por correo
Estilo
Modo lineal Cambiar a modo híbrido Cambiar a modo de árbol