Cómo cambio el tamaño de las imágenes, "autoajustar"
Autor: Jorge Leonardo R.
Visitado 1088,
Followers 1,
Compartido 0
Hola, buenas tardes, si son muy amables, ¿Podrían ayudarme con un problema que tengo con respecto al tamaño de las imágenes? Sucede que, por ejemplo, puse una imagen de 500x500 px, lo que me gustaria encontrar es alguna opcion que me permita hacer que esta imagen tenga un tamaño de 100x100 px, sin que me recorte la imagen. Poder ajustarle los tamaños. Encontré una manera de "achicar" la foto, pero solo recortandola, en realidad esa opción no me ajustaba el tamaño, sino que recortaba a alguna zona especifica. ¡Muchas gracias a quien pueda ayudarme con este problema!
Publicado en
Hola Jorge:
Para hacer la imagen responsiva yo uso este código:
<div align="center">
<img src="https://www.airloud.com/template/radiomazz-1608631432.jpg" style='width:100%;max-width:600px;margin:10px;' />
</div>
Explico...
Lo coloco en un objeto html, lo asigno a un div para que la imagen esté al centro, se coloca la dirección de la imagen donde la coloques en el servidor y le aplico el siguiente estilo.
Width: 100% ocupara el total del tamaño de la columna que le asignes.
Max-width: 600px la imagen se achicará al 100% de la columna asignada anterior, hasta un máximo de 600px si la columna sobrepasa los 600px. Ahora que si lo quieres bloquear a un máximo de 100px le asignas esa cantidad.
Margin: 10px le asignará un espacio vacío de 10px alrededor de la imagen.
Prueba distintas combinaciones.
Saludos.
Jorge,
Puedes jugar con el tamaño de la imagen dependiendo del tamaño de las celdas en tu grilla, ademas, otra forma de chicar imagenes es modificando el margen interno de las celdas desde las opciones en ESTILO (barra de tareas).
Igual siempre recuerda que lo ideal es optimizar las imagenes, por lo que no es bueno importar al programa una imagen de 600 x 600, si la vas a mostrar de 100 x 100, estas multiplicando x 5 el tiempo de carga de la imagen sin sentido.
Saludos colega...
Carlos A.