Reducir imagen sin que distorsione

[Anastasiaphp]

Hola!

Estoy intentando que me muestre las imágenes que salen de una galería a tamaño más pequeño pero sin que las distorsione. Lo que he hecho es esto:

Código:

#imagen_reducida {
	height: 16%;
	width: 16%;
}

En Firefox funciona, pero en IE o en Safari, no. ¿Alguna otra manera de hacerlo?

Gracias y saludos.

[Mikmoro]

Depende de a qué te refieras con "distorsionar" y dónde esté ubicada tu foto. Cuando marcas un porcentaje, se referirá al porcentaje con respecto a su contenedor, no con respeto a la foto.
En ese caso, lo que podrías hacer es crear un div contenedor del tamaño que te interesa que sean las fotos y luego decirle que las fotos que aparezcan en cada contendor tengan un height y un width del 100% del contenedor. Suelen quedar bien, pero ten en cuenta que no respetará las medidas de tu foto (si no es cuadrada), sino las del contenedor, así que deberás hacer el contenedor en las medidas exactas o proporciones de las fotos.

Un ejemplo: si tengo una foto que mide 1000 x 500px y la quiero en miniatura, hago un contenedor que mida 200 x 100px (por ejemplo). Meto dentro la foto a la que digo que mida el 100% de height y de width, y quedará perfecta (todo lo perfecta que pueda verse esa foto tan reducida según su resolución.

Mikel.

[JavierB]

Hola.

Una opción sería poner solo una de las dimentiones, por ejemplo el ancho:

#imagen_reducida {width:200px}

así la altura quedaría proporcional a la anchura.

Saludos,

[Anastasiaphp]

Gracias, voy a probarlo...

[Anastasiaphp]

Perfecto, la opción de JavierB funciona sin problemas. Gracias.