Foros del Web » Programando para Internet » Javascript »

Escalar imagenes con javascript

Estas en el tema de Escalar imagenes con javascript en el foro de Javascript en Foros del Web. tengo un img que cambia la ruta dinamicamente de su SRC, pero las imagenes aveces son muy chicas u otras muy grandes, entonces quiero escalar ...
  #1 (permalink)  
Antiguo 31/12/2012, 19:33
 
Fecha de Ingreso: abril-2008
Mensajes: 316
Antigüedad: 14 años, 2 meses
Puntos: 3
Escalar imagenes con javascript

tengo un img que cambia la ruta dinamicamente de su SRC, pero las imagenes aveces son muy chicas u otras muy grandes, entonces quiero escalar la imagen con javascript, manteniedo el aspecto, cuando sea chicas rellenar el sobrante de alguna forma, o en su defecto centrar la imagen chica, pero no se como escalar la imagen con javascript, atravez de la url del SRC, es forzosamente usar el canvas??
  #2 (permalink)  
Antiguo 01/01/2013, 02:20
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 20 años, 2 meses
Puntos: 1284
Respuesta: Escalar imagenes con javascript

Hola:

Con javascript solo podrías cambiar los atributos o estilos width y height... cambiando solo uno, y sin existir el otro, se escala proporcionalmente, pero con las imágenes normales se produce el efecto de pixelado, así que tal vez sea mejor poner esa imágenes como fondos de capas, en donde usando también sus estilos se pueden centrar style="background: url(imagen.jpg) no-repeat center center"

Otra posibilidad es tener en el servidor esa imagen con su máximo tamaño, y reducirlas también en el servidor...

Con figuras geométricas puedes usar el formato svg que es escalable, aunque no soportado en antiguas versiones de los navegadores.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 01/01/2013, 10:48
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 14 años, 3 meses
Puntos: 21
Respuesta: Escalar imagenes con javascript

Puedes usar CSS3: scale()
__________________
_
  #4 (permalink)  
Antiguo 01/01/2013, 14:46
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 15 años
Puntos: 1567
Respuesta: Escalar imagenes con javascript

Cita:
Iniciado por rogeliomx Ver Mensaje
tengo un img que cambia la ruta dinamicamente de su SRC, pero las imagenes aveces son muy chicas u otras muy grandes, entonces quiero escalar la imagen con javascript, manteniedo el aspecto, cuando sea chicas rellenar el sobrante de alguna forma, o en su defecto centrar la imagen chica, pero no se como escalar la imagen con javascript, atravez de la url del SRC, es forzosamente usar el canvas??
Falta información a tu planteo, si son chicas o grandes , será respecto de otra cosa, pero no explicitás que.
Otro detalle, supongamos que tu elemento imagen tiene dimesiones definidas, y contra este valor se hace el ajuste, este elemento y las otras imágenes, ¿tienen todos una misma relación de aspecto? por que si no es así, no hay ajuste posible sin deformación.
Y como obtenés los tamaños de las otras imágenes?
Rellenar el sobrante? el sobrante de que, si acaso tuvieses la imagen dentro de una capa, o una capa con otra capa con fondo dentro de esta.

lo que te ha dicho @caricatos,
min-width / max-width / background-size de css son otras alternativas, pero es imposible ser preciso con lo que has expuesto
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 02/01/2013, 23:35
 
Fecha de Ingreso: abril-2008
Mensajes: 316
Antigüedad: 14 años, 2 meses
Puntos: 3
Respuesta: Escalar imagenes con javascript

jeje ya quedo resuleto, cuando es chica, solamente floto la imagen y la coloco en el medio de mi contenedero tanto verticalmente como horizontalemente y cuando es muy grande se escala usando el atributo width, utilice el maxwidth y max heigth, jeje funciono perfecto. gracias.

Etiquetas: escalar, imagenes
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 08:11.