Foros del Web » Creando para Internet » CSS »

mantener el porcentaje de width y height en las imagenes

Estas en el tema de mantener el porcentaje de width y height en las imagenes en el foro de CSS en Foros del Web. Buenas, tengo un form para subir imagenes a mi web, el problema es que si suben una imagen de 100px de ancho y 100px de ...
  #1 (permalink)  
Antiguo 23/05/2011, 11:53
Avatar de waldragon  
Fecha de Ingreso: mayo-2010
Mensajes: 735
Antigüedad: 7 años, 4 meses
Puntos: 55
Pregunta mantener el porcentaje de width y height en las imagenes

Buenas, tengo un form para subir imagenes a mi web, el problema es que si suben una imagen de 100px de ancho y 100px de alto, esta todo bien porque despues la muestro asi <img src="http://misitio/imagenes/imagen.gif" width="50" height="50">
y hago que se vea mas chica pero en proporciones iguales, pero si un usuario sube una imagen de 150px de ancho y 200px de alto, al mostrarla sale deformada, como puedo hacer para que mantenga las proporciones??? gracias.
__________________
Crea tus proyectos con Contador de caracteres para SEO
-
Aviones de Guerra
  #2 (permalink)  
Antiguo 23/05/2011, 14:11
 
Fecha de Ingreso: septiembre-2010
Mensajes: 525
Antigüedad: 7 años
Puntos: 59
Tendrías que hacerlo con algún lenguaje de programación, ej. JavaScript o PHP.

__________________
01011111 01000001 01100100 01110010 01101001 01100001 01101110 01011111
  #3 (permalink)  
Antiguo 23/05/2011, 14:12
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: mantener el porcentaje de width y height en las imagenes

Hola.

Con CSS no podrás asignarle un nuevo tamaño a tus imagenes.
Lo que sí podrías hacer con CSS sería darle un max-width y max-height de 50px a las imagenes.
De esa forma si la imagen es mas ancha que alta, se disminuirá so ancho hasta 50px. Y por el contrario si es mas alta que ancha se diminuirá su altura hasta 50px.

Código HTML:
.thumbnail {
   max-width:50px;
   max-height:50px;
}
* html .thumbnail { 
   height: expression( this.scrollHeight > 49 ? "50px" : "auto" ); 
   width: expression( document.body.clientWidth > 49 ? "50px" : "auto" );
}
...
<img class="thumbnail" src=".../image.gif" /> 

Etiquetas: imagenes, proporciones
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




La zona horaria es GMT -6. Ahora son las 22:09.