Foros del Web » Creando para Internet » CSS »

redimension proporcional de imagenes

Estas en el tema de redimension proporcional de imagenes en el foro de CSS en Foros del Web. hola necesito redimensionar una imagen de forma tal que mantenga su proporcion. pero que esta se ajuste a un ancho dado. es decir que necesito ...
  #1 (permalink)  
Antiguo 21/09/2009, 21:32
Avatar de p2pdownloading  
Fecha de Ingreso: noviembre-2007
Ubicación: La Plata, Argentina
Mensajes: 784
Antigüedad: 10 años
Puntos: 3
redimension proporcional de imagenes

hola necesito redimensionar una imagen de forma tal que mantenga su proporcion. pero que esta se ajuste a un ancho dado.

es decir que necesito que todas las imagenes por ejemplo tengan un ancho de 100px, pero que el alto se mantenga proporciona.

como puedo hacer essto ?

muchas gracias
__________________
PROGRAMAS P2P
Moviles
  #2 (permalink)  
Antiguo 21/09/2009, 23:06
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: redimension proporcional de imagenes

Con porcentajes puedes hacerlo, pero no entiendo exactamnete que es lo que quieres hacer, podrias ser un poco mas especifico???
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 22/09/2009, 00:03
 
Fecha de Ingreso: marzo-2009
Mensajes: 30
Antigüedad: 8 años, 9 meses
Puntos: 2
Respuesta: redimension proporcional de imagenes

es muy dificil si quieres mantener un ancho que al cambiar el alto se mantenga proporcional ya que todo tendria el mismo ancho y el alto cambiaria!! envianos mas informacion sobre lo que quieres hacer para poder ayudarte!!
  #4 (permalink)  
Antiguo 22/09/2009, 06:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: redimension proporcional de imagenes

Consideraciones previas:
La caja que contenga la imagen tiene que tener una anchura declarada. Obligatorio. Esta anchura va a ser la base de conversión del tamaño.

Supuesto:
Sea una caja para contener imágenes que se llame "#contiene-imagenes"
Sea su anchura declarada en el css de 500px (width: 500px;) (este valor será el patrón de conversión)
Sea una imagen de cualquier tamaño (su anchura) 'imagen1.jpg'

Resolución:
Declara en el css una anchura del 100% (width: 100%;), por ejemplo, para '#contiene-imagenes img'

si en el html haces:
Cita:
<div id="contiene-imagenes">
<img src="imagen1.jpg" alt="xxx" title="zzz" />
</div>
tendrás la imagen presentada con 500px de ancho y su alto será proporcional (no se distorsiona la proporción ancho/alto de la imagen).

Consideraciones finales:
Si la imagen mide más de 500px se reduce, pero si la imagen mide menos aumentará.
Todo lo anterior no sirve para imágenes utilizadas como fondo vía css2.
A tener presente que el peso de la imagen (kb) no se ve alterado. Es el que tenga la original.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 22/09/2009, 08:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: redimension proporcional de imagenes

Cita:
Iniciado por p2pdownloading Ver Mensaje
hola necesito redimensionar una imagen de forma tal que mantenga su proporcion. pero que esta se ajuste a un ancho dado.
Creo que el título llama a engaño con eso de la redimensión, y en realidad no se refiere a cambiar el tamaño una vez mostrada la imagen sino cambiarlo de la imagen origen a la mostrada, lo que se resolvería con un simple:

img {width: 100px;}

de tal manera que todas las imágenes insertadas tendrían siempre 100px de ancho y el alto que corresponda para que no se deforme, tal y como pide.
  #6 (permalink)  
Antiguo 22/09/2009, 11:11
Avatar de p2pdownloading  
Fecha de Ingreso: noviembre-2007
Ubicación: La Plata, Argentina
Mensajes: 784
Antigüedad: 10 años
Puntos: 3
Respuesta: redimension proporcional de imagenes

hola mil gracias por sus rápidas respuestas! voy a probar la solucion propuesta por kseso?

Mikmoro como tu dices lo que quiero hacer es darle a las imagenes la propiedad img {width: 100px;} pero necesito que el alto se mantenga proporcional, es decir, que la imagen no se deforme.

en un rato les cuento si funciono.

gracias
__________________
PROGRAMAS P2P
Moviles
  #7 (permalink)  
Antiguo 22/09/2009, 11:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: redimension proporcional de imagenes

Precisamente es lo que he dicho: con width: 100px y sin tocar el alto, éste será proporcional al ancho siempre, guardando la misma relación de ancho-alto que la imagen original.
  #8 (permalink)  
Antiguo 24/09/2009, 18:40
Avatar de p2pdownloading  
Fecha de Ingreso: noviembre-2007
Ubicación: La Plata, Argentina
Mensajes: 784
Antigüedad: 10 años
Puntos: 3
Respuesta: redimension proporcional de imagenes

perfecto! muchas gracias
__________________
PROGRAMAS P2P
Moviles
  #9 (permalink)  
Antiguo 10/10/2009, 01:19
 
Fecha de Ingreso: junio-2009
Mensajes: 7
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: redimension proporcional de imagenes

esto se puede hacer sin poner "id=" en el código de pagina? que todas las imágenes sin excepción se ajusten a un ancho, se puede?
  #10 (permalink)  
Antiguo 10/10/2009, 03:57
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: redimension proporcional de imagenes

Hola:

No entiendo bien tu duda, pero la respuesta de kseso? como la de mikmoro son totalmente válidas.

Saludos.

  #11 (permalink)  
Antiguo 10/10/2009, 08:30
Avatar de XLogus  
Fecha de Ingreso: noviembre-2008
Ubicación: AQP
Mensajes: 495
Antigüedad: 9 años
Puntos: 19
Respuesta: redimension proporcional de imagenes

Yo en un afán aguafiestas diré que aunque las soluciones planteadas funcionan no resulta buena idea usarlas.

1. Porque aunque la imagen efectivamente reduzca en la pantalla, su tamaño (en Kb) sigue siendo el mismo por lo que tardará lo mismo en cargar por lo que es mejor la creación de thumbnails ya sea manualmente o usando GD2 de PHP.

2. En IE6 la imagen se reducirá pero quedará muy pixelada y distorcionada.
  #12 (permalink)  
Antiguo 10/10/2009, 16:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: redimension proporcional de imagenes

Cita:
Iniciado por XLogus Ver Mensaje
Yo en un afán aguafiestas diré que aunque las soluciones planteadas funcionan no resulta buena idea usarlas.
img {width: 100px;}

A no ser que la imagen original tuviera 100 o 120 px de ancho, ¿no?

Hay que ser prudente antes de generalizar, o bien puntualizar adecuadamente.

"hola necesito redimensionar una imagen de forma tal que mantenga su proporcion. pero que esta se ajuste a un ancho dado."

Es de suponer que sabe que podría editarlas en origen, pero no parece ser lo que busca, digo yo.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 10/10/2009, 17:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: redimension proporcional de imagenes

Hola Xlogus:
Creo que te saltaste las conclusiones de mi comentario, el #4.
O quizás fue que te confundió el que ésto podría haberlo redactado mejor:
"(no se distorsiona altera la proporción ancho/alto de la imagen)."

Y se pixelará si ve aumentado su tamaño significativamente (con i6 o con el potochop de turno).
Si el cambio de tamaño es lo suficientemente grande, todos sabemos lo que ocurre en esos casos, tanto en un navegador como en un programa de edición de imágenes. Y no es "pixelado" precisamente.
Pero siempre se mantiene su proporción (la relación entre sus lados).

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 10/10/2009, 20:50
Avatar de XLogus  
Fecha de Ingreso: noviembre-2008
Ubicación: AQP
Mensajes: 495
Antigüedad: 9 años
Puntos: 19
Respuesta: redimension proporcional de imagenes

Por favor relean mi comentario yo no digo que no funcione solo digo:
- Aunque la imagen se reduzca en pantalla su tamaño en Kb no se reduce por lo que demora mucho en cargar si tienes una imagen grande (problema muy común en zencart) por lo que es recomendable crear thumbnails

- En FF, IE8 e IE7 si reduces(usando CSS) una imagen de por ejemplo 700x500 a 120px de ancho esta quedará razonablemente bien pero en IE6 se verá muy distorcionada.

Kseso dije REDUCIR en ningun lado dije agrandar, adjunto un screenshot de la misma imagen REDUCIDA en distintos browsers para que quede mas claro a que me refiero

Última edición por XLogus; 10/10/2009 a las 21:01
  #15 (permalink)  
Antiguo 11/10/2009, 08:56
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: redimension proporcional de imagenes

Xlogus. Todo bien. Sólamente es un intercambio de ideas/puntos de vista. ¿Ok?

Y lo que estoy intentando decirte es que tu advertencia sobre el peso de la imagen ya estaba hecha:
Cita:
Iniciado por kseso?
A tener presente que el peso de la imagen (kb) no se ve alterado. Es el que tenga la original.
Que en cuanto a la pérdida de información mostrada en la imagen así reducida, es pareja a la que ocurre en cualquier proceso de reducción del tamaño de una imagen, sea por el medio que sea. Y que frente a esa pérdida de información el aspecto "un poco mejor o un poco menor" de un navegador a otro es secundario y poco relevante.
Aquí una muestra de la imagen original y reducida vía css en ie6 y ff:


Y si he manifestado mis discrepancias con tu aseveración tan categórica y "universal":
Cita:
Iniciado por Xlogus
diré que aunque las soluciones planteadas funcionan no resulta buena idea usarlas.
es porque el que sea buena o mala idea dependerá de las particularidades de cuando se utilice. Y se me ocurren unas cuantas situaciones que lo justificarían y otras tantas que desaconsejarían su uso.
También me animé a darte réplica porque mezclas y equiparas conceptos distintos:
Esto es una imagen pixelada:


Y esto una distorsionada (alterada la relación ancho/alto original:


Situaciones que no se producen con la solución dada al y que se ve en la primera imagen.

Pero como te decía al inicio, símplemente son matizaciones y aclaraciones para quienes puedan llegar a este hilo en el futuro.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #16 (permalink)  
Antiguo 11/10/2009, 12:54
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: redimension proporcional de imagenes

Yo estoy en un problema similar, y optando por usar un condicional javascript.

Si la imagen es mayor que 600px, la reduzco a 600px. Si es menor, no hago nada.
  #17 (permalink)  
Antiguo 11/10/2009, 14:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: redimension proporcional de imagenes

Cita:
Iniciado por mayid Ver Mensaje
Yo estoy en un problema similar, y optando por usar un condicional javascript.

Si la imagen es mayor que 600px, la reduzco a 600px. Si es menor, no hago nada.
Hola Mayid
¿Probaste a utilizar el "max-width" (y su equivalente para ie) en vez del "width"?

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 13:12.