En este tutorial básico de HTML y CSS vamos a aprender cómo cambiar el tamaño de imágenes. Vamos a poder definir un tamaño máximo, o en todo caso un tamaño fijo para las imágenes. Sigue leyendo para concoer cómo cambiar el tamaño de una imagen en HTML y en CSS.
Cómo cambiar el tamaño de una imagen con HTML
Para cambiar el tamaño de una imagen con HTML usamos los atributos width y height. Este sería un ejemplo:
<img src="prueba.jpg" alt="Prueba" width="500" height="500">
Este ejemplo muestra la etiqueta de imagen en HTML con el atributo alt y los atributos de tamaño: width (ancho) y height (alto). Ambos se han definido como 500 pixeles. Solo se deben usar valores en la unidad de pixeles.
Un detalle a recordar es que uno está cambiando el tamaño visual de la imagen. La imagen puede ser muy grande, y podemos hacer que se vea en 500x500px, pero el peso de la imagen es el mismo. Solo estamos cambiando el tamaño que ocupa en nuestra pantalla.
Cómo cambiar el tamaño de una imagen con CSS
Para cambiar el tamaño de una imagen con CSS usamos las propiedades width y height. Te mostramos en un ejemplo sencillo:
<img src="prueba.jpg" alt="Prueba" class="img-mediana">
.img-mediana{
width: 500px;
height: 500px;
}Como puedes ver, hemos agregado una clase llamada .img-mediana a nuestra etiqueta de imagen en HTML. Y hemos usado las propiedades de width (ancho) y height (alto) en CSS para especificar un tamaño fijo de 500 de ancho y 500 de alto.
¿Cómo no perder la proporción de las imágenes?
Recuerda tener en cuenta la proporción de tus imágenes. Si defines 500px de ancho y 500px de alto a una imagen que no es cuadrada, pues verás la imagen distorsionada. Ahí te recomendamos definir o el ancho o la altura, y el otro dejarlo en auto.
.img-mediana{
width: 500px;
height: auto;
}En este ejemplo, la imagen tendrá el ancho de 500px, y la altura se definirá automáticamente segun el ratio de la imagen. Esto te permite no perder la proporción de tus imágenes.
¿Cómo definir tamaños máximos para las imágenes?
Por otro lado, también puedes definir el tamaño máximo de tus imágenes. Esto lo puedes hacer usando la propiedad de CSS: max-width y max-height. Un ejemplo sería el siguiente:
<img src="prueba.jpg" alt="Prueba" class="img-maximo">
.img-maximo{
max-width: 500px;
height: auto;
}Esto permite que las imágenes de ancho más pequeñas que 500px no se agranden. Es decir, se va a definir el ancho máximo como 500 pixeles. Y la altura se definirá automáticamente dependiendo de la proporción de la imagen.
¡Eso es todo! Por cierto, volvemos a repetir que estos métodos no reducen el peso ni las dimensiones de la imagen, lo único que hacen es cambiar el tamaño que ocupa la imagen en la pantalla. Si quieres agilizar la carga de imágenes, te recomendamos redimensionarlas antes de subirlas.
Si tienes alguna duda, por favor déjanos un comentario para poder ayudarte.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
