Como mantener la proporcion de una imagen en una capa

[acoevil]

Buenas tardes,

Primero que todo, pido disculpas si este no es el lugar adecuado para colocar mi duda, si no es el lugar estaría agradecido si un moderador mueve el tema al lugar indicado.

Resulta que tengo una capa de 631 x 300 px, allí deseo colocar una imagen que el usuario requiera subir, pero tengo un problema con imágenes que tienen proporciones muy grandes o muy pequeñas.

Si la imagen es muy grande a lo alto si la redimensiono a ese tamaño que indique arriba, posiblemente salga mal la imagen, si la suben muy pequeña también puedo tener problemas.

Podría resolver el problema para imágenes mas pequeñas al tamaño que indique colocando la imagen en el centro.

Pero me gustaría saber ustedes que hacen en un caso como este.

Muchas gracias por su colaboracion

[pitufoweb]

Hola,

La mayoría de las veces las imágenes pequeñas solo las coloco en el centro.
En algunos casos, requiero/valido que la imagen tenga un tamaño mínimo.

Para las imágenes que son mas grandes, generalmente lo que hago es aplicarle un "crop" con las dimensiones deseadas y un link(colorbox, etc..) a hacia la imagen completa.
En algunos casos, lo que hago es "resize" la imagen manteniendo las proporciones y colocandola en el centro.


Seguro hay otras técnicas. Esperemos que nos cuenten como lo hacen los compañeros ;)



Saludos

[acoevil]

Hola que tal , gracias por su respuesta.

Si yo también aplico algo como colorbox, pero al momento de redimencionar si la capa contenedora tiene estas propociones 631 x 300 px y si la imagen es mas grande a lo alto, quedaria mal re dimensionada cierto ? o hay alguna técnica para que quede bien?

Muchas gracias por su colaboracion

---

Aaa encontre lo que mencionas de crop, me parece que es muy buena idea, ya tocaria es hacer algo para q el usuario seleccione lo que desea que se vea.
http://deepliquid.com/content/Jcrop_Manual.html


Espero que sigan aportando jeje

[veruti85]

Puedes usar "max-width: 631px;max-height: 300px;"

Asi mantiene proporcion a la imagen y la ajusta al primer maximo que encuentre, bien al ancho o al alto, para el minimo tambien tienes el min-width y min-height

Saludos

[acoevil]

Hola que tal, finalmente coloque "max-width: 631px;max-height: 300px;" y realmente funciona muy bien.

Gracias por sus aportes compañeros.