Escalar imagenes con javascript

[rogeliomx]

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??

[caricatos]

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

[opzina]

Puedes usar CSS3: scale()

[emprear]

Iniciado por rogeliomx

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

[rogeliomx]

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.