Efecto imágenes

[emmx2012]

Hola, resulta que quiero hacer que cuando haga click en una imagen, ésta se agrande, puedo hacerlo al efecto como q aparezca en una ventana modal, ahora si modifico width y height de la imagen en <img>, cada una tendria un porcentaje distinto porq no son del mismo tamaño, y seria mucho trabajo hacerle eso a cada una, encima q las llamo mediante php entonces todas tienen q tener el mismo width y height, entonces necesito tener imagen chica y la misma imagen en grande verdad? necesito acomodarlas a todas a un tamaño en comun para q quede prolijo verdad? hay alguna manera de hacerlo mas rapido? no se mucho de efectos ya q no se jquery ni js, si me pueden recomendar alguna metodologia, alguna estrategia :P para hacer todo esto (espero q me hayan entendido)

[djsampe]

Hola,

Puedes utilizar algunas propiedades de CSS3 para que la imagen se escale, De todas formas no sé si lo que quieres es una Galería donde ver la imagen en su tamaño real.
Lo que se suele hacer es grabar en BBDD un registro con la ruta thumbnail y la ruta normal de la imagen. Para que la web quede más vistosa, lo mejor es que redimensiones todas las imagenes que guardes a un ancho fijo, yo suelo ponerlas a 800px máximo de ancho y las thumbnail pues depende, entre 200-350px.

Te paso un ejemplo de como escalar una imagen, pero es con efecto hover, no click

Código:

<style>
    .imagen{
		transition: all 1s ease 0s;
		width: 90%;
		max-width:200px;
	 }
	 
	 .imagen:hover{
		transform: scale(1.1);
		transition: all 1s ease 0s;
	 }
	 
	 .imagen img{
		width:100%;
	 }
	 
</style>

<div class='imagen'><img src='ruta_imagen'/></div>

Un saludo.

[emmx2012]

Gracias amigo por la respuesta, leí que cuando modificas solo el width en el tag <img> el height se cambia automaticamente y mantiene la proporcion de las medidas de la imagen, (problema que pensaba que tendría al cambiar width y height para imagenes de diferentes tamaño), asi q con ésto intentaré hacerlas para que aparezcan más grande en una ventana modal al hacerles click.