redimension proporcional de imagenes

[p2pdownloading]

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

[Carlangueitor]

Con porcentajes puedes hacerlo, pero no entiendo exactamnete que es lo que quieres hacer, podrias ser un poco mas especifico???

[rojaswilmer]

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!!

[kseso?]

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:

<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

[Mikmoro]

Iniciado por p2pdownloading

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.

[p2pdownloading]

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

[Mikmoro]

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.

[p2pdownloading]

perfecto! muchas gracias

[ferdari]

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?

[jomaruro]

Hola:

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

Saludos.

[XLogus]

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.

[Mikmoro]

Iniciado por XLogus

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.

[kseso?]

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

[XLogus]

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

[kseso?]

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:

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":

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

[mayid]

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.

[kseso?]

Iniciado por mayid

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