El siguiente tutorial esta orientado a los usuarios que quieren mantener una imagen en su tamaño de archivo original (en KB o MB) y cambiar el tamaño de visualización de una foto o imagen con HTML. Aunque esto se puede hacer de manera fácil, desde InternetCtrl aconsejamos que cambies previamente el tamaño de la imagen utilizando un editor de imágenes para reducir el tamaño del archivo y el tiempo de descarga de la imagen. Debes saber que cuando se redimensiona una imagen utilizando los pasos de esta guía paso a paso, todavía tiene que cargar la imagen más grande, aunque aparezca más pequeña en el navegador y esto puede perjudicar la velocidad de carga de su página web y por lo tanto, estropear los Core Web Vitals de tu web.
Puede seguir los siguientes 3 tutoriales nuestros sobre edición de imágenes:
Ahora si, vamos a explorar los trucos y te mostraremos cómo usar cositas extra como width, height, object-fit y más. No importa si eres nuevo en CSS o si ya eres un veterano buscando darle un boost a tus habilidades, ¡esta guía tiene algo bueno para todos!
Cambiar el tamaño con HTML
Si lo que buscamos es modificar el tamaño de la imagen, lo que tenemos que hacer es utilizar los atributos HTML width y height, estos atributos nos permiten modificar el ancho y el alto de la imagen respectivamente. A continuación, especifica la anchura y la altura en la etiqueta de HTML IMG SRC como mostramos en el ejemplo siguiente.
<img src="https://internetctrl.com/medios/2020/06/internetctrl-logo.png" width="150" height="40" alt="InternetCtrl">
Cómo aparece la imagen tal cual es
Como aparece usando el HTML de antes
Cambiar el tamaño de la imagen con CSS
También puede cambiar el tamaño de una imagen mediante CSS, como mostraremos en los ejemplos siguientes.
img.redimension {
width:200px;
height:40px;
}
img.redimension {
max-width:50%;
max-height:50%;
}
En el primer ejemplo, se especifica el tamaño real en píxeles para la anchura y la altura. El uso de esta opción, limita las imágenes que utilizan ese CSS. Dado que especifica una anchura y una altura, este método podría dar lugar a imágenes distorsionadas si no tiene una relación de aspecto de 5:1.
El segundo ejemplo especifica un porcentaje del tamaño original de la imagen, tanto en anchura como en altura, en lugar del tamaño en píxeles. El uso de esta opción, permite el uso con una mayor gama de imágenes. Como se especifica un porcentaje de la anchura y la altura de la imagen, el navegador puede cambiar el tamaño de casi cualquier imagen y mantener su relación de aspecto.
Para aplicar el CSS a una etiqueta HTML con IMG SRC, se debe hacer lo siguiente.
<img class="redimension" src="https://internetctrl.com/medios/2020/06/internetctrl-logo.png" alt="Logo de InternetCtrl redimensionado con CSS">
El uso de CSS hace que las etiquetas IMG SRC sean más cortas, ya que sólo hay que especificar el nombre de la clase en la etiqueta para activar el código CSS de esa imagen.
Otras formas de ajustar el tamaño de las imágenes con CSS
Además de las propiedades básicas, hay otras herramientas que puedes aprovechar para tener el control total sobre el tamaño de tus imágenes. Aquí te dejamos algunas:
Max width y Max height
Las propiedades max-width y max-height en CSS te permiten establecer el límite máximo de ancho y altura para un elemento. Son geniales cuando deseas que un elemento, como una imagen, se adapte de manera sensible y ajuste su tamaño según la pantalla o el contenedor en el que se encuentre.
.clase-imagenes-internet-ctrl { max-width: 100%; }
En este caso práctico, la imagen no sobrepasará nunca el 100% del ancho de su contenedor. Esto implica que la imagen se ajustará automáticamente si el contenedor es más estrecho que la anchura original de la imagen.
Object Fit
Ahora, echemos un vistazo a una joya más en el arsenal de CSS para el redimensionamiento de imágenes: la propiedad object-fit. Esta maravilla define la manera en que un objeto, ya sea una imagen o un video, se transforma para adaptarse como un guante a su contenedor.
Las opciones son variadas: fill, contain, cover, none, scale-down. Cada una de estas opciones moldea la imagen de forma única, otorgándote un control preciso sobre el juego de dimensiones de tu imagen. ¡Da rienda suelta a tu creatividad!
.clase-int-ctrl { object-fit: cover; }
En este caso de uso, la propiedad cover desempeña un papel clave al redimensionar la imagen para abarcar por completo el contenedor. Aunque preserva cuidadosamente las proporciones originales, es importante señalar que si las proporciones del contenedor no coinciden con las de la imagen, es posible que algunas áreas de esta última se extiendan más allá de los límites del contenedor. Esta funcionalidad ofrece una solución elegante, pero es crucial considerar la coherencia de proporciones al implementarla.
Esperamos que con esta breve guía paso a paso hayas aprendido a cambiar el tamaño de una imagen fácilmente con HTML, CSS y otras nuevas propiedades.
Si tienes algún comentario o pregunta, por favor deja un comentario abajo y te responderemos lo antes posible.
