Redimensionar imágenes con css o js

Lo ideal sería que en tu sistema de upload comprobaras si la imagen sobrepasa los límites, ya sea de medidas como de tamaño (KB), y si los sobrepasa, que avise de ello y que no la suba.

Ahora bien, si deseas redimensionar una imagen, ten en cuenta que no podrás ponerla a un tamaño fijo como dices, pues debes respetar la relación ancho-alto (las imágenes subidas no tienen por que ser cuadradas siempre).

Lo que si puedes hacer es ponerle unas dimensiones máximas de ancho-alto y que se recalculen.

Por ejemplo, si la imagen fuera..

<img class="Avatar" src="Foto.jpg">

Podrías añadir al CSS:

.Avatar {
  width:auto;
  height:auto;
  max-width:100px;
  max-height:100px;
}

De esa manera ninguna de las 2 dimensiones nunca pasaría de 100 puntos, pero la imagen se redimensionaría respetando la relación ancho-alto.

Salu2.

También decir que si una de las 2 dimensiones te da igual la medida, puedes hacer que una de las 2 dimensiones sea fija, y se calcule la otra. Por ejemplo para un ancho fijo de 100 y que se calcule el alto:

.Avatar {
  width:100px;
  height:auto;
}

Salu2.

Hola, gracias por tu respuesta. Efectivamente lo que me planteas en el css es lo que hago yo la puse a máximo 100px tanto de alto como de ancho. y eso me ha dado un resultado satisfactorio. Pero la verdad es que el tema va mas allá aun, por que por ejemplo si tengo el fondo de una cabecera que es una imagen subida por el usuario y delante le muestras su avatar, ahora el problema seria la imagen de la cabecera.
Si trabajo con bootstrap y le doy la clase img-responsie. La imagen se hace responsiva, pero queda por cualquier lado.
Pienso que quizás me convenga usar un paquete como dropzone (aunque no quiero) o como me comentas tu, limitar al usuario el tamaño de la imagen y el peso evidentemente. Que creo que por desgracia es lo que tendré que hacer.
Saludos y gracias.