Redimensionar imágenes con css o js

La verdad es que no soy ningún experto en el tema de desarrollo web, De todas maneras manejo relativamente sin problemas laravel. Pero mi problema realmente es relacionado con el tema de las imágenes. Hice un sistema donde los usuarios pueden subir un avatar. El asunto es que no se como lograr que las imágenes se muestren en un determinado tamaño. Por ejemplo de 100 x 100 pixeles. Pero que la web incluyendo las imágenes sigan siendo responsive.
Siempre se me descuadra algo.
Espero que alguien me pueda dar una mano con este problema.

1

1 respuesta

Respuesta
2

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.

Es que lo ideal es limitar medidas y peso. Piensa que aunque redimensiones la imagen, el "gasto" de ancho de banda de tu sitio web sera el mismo (la imagen que se descarga el visitante cuando la visualiza tiene el tamaño y peso original).

Salu2.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas