Cambiar el tamaño de las imágenes con javascript antes de asignarlas a una etiqueta img

Question

Soy muy nuevo en el desarrollo de HTML y CSS.

Tengo una página HTML con una etiqueta img. Esta etiqueta tendrá algunas imágenes. Estas imágenes tienen diferentes tamaños. Configuré un ancho y alto a la etiqueta img usando CSS.

Todas las imágenes se mostrarán mediante JavaScript.

¿Necesito cambiar el tamaño de las imágenes con JavaScript antes de asignar una imagen a la etiqueta IMG? Tal vez, no necesito hacer eso porque configuré el tamaño IMG usando CSS. Las proporciones estarán restringidas?

Lo siento por mi inglés.

Answer 1

La relación de aspecto no se mantendrá si ha configurado tanto la altura como el ancho con css. Pero si especifica alguna de las propiedades con la etiqueta html img, se mantendrá la relación de aspecto.

Answer 2

Debería hacer esto en el lado del servidor. Con un script de administración. Puede crear las versiones de la imagen original cuando está cargada, y luego esas imágenes pueden ser usadas con seguridad por el lado HTML/CSS.

Esto no es una tarea que hacer en el lado del cliente. Básicamente, lo que estás haciendo aquí es descargar una imagen grande (muchos datos) y luego simplificarla para crear una imagen más pequeña. Así que está desperdiciando ancho de banda del cliente y ancho de banda del servidor.

Si hay posibilidad ninguna allí y tiene un área fija decir 640x480, entonces se puede acieve recorte rudimentaria con el mantenimiento de la relación ascpect con lo siguiente:

HTML:

<div id="wrapper"><img src="my.jpg"></div> 

CSS:

#wrapper { 
    width: 640px; 
    height: 480px; 
    line-height: 480px; 
} 

#wrapper img { 
    width: 640px; 
}