¿Cómo redimensionar una imagen con CSS? - Guía paso a paso

Imagina que tienes una página web con una hermosa galería de imágenes, pero hay un problema: algunas de las imágenes son demasiado grandes, eclipsando el resto de tu contenido y ralentizando la velocidad de carga de la página. O quizás las imágenes son demasiado pequeñas, dejando a tus visitantes entrecerrando los ojos tratando de discernir los detalles. ¿Qué hacer en este caso? ¿Cómo puedes lograr ese equilibrio perfecto que hace que tu sitio web sea atractivo y funcional al mismo tiempo? Aquí es donde entra en juego el arte de redimensionar las imágenes con CSS.

En esta guía paso a paso, te llevaremos por la mano a través del proceso de redimensionar las imágenes con CSS. Exploraremos diferentes técnicas y aprenderemos a aplicar diversas propiedades de CSS, como width, height, object-fit, y más. No importa si eres un principiante en CSS o un veterano buscando refrescar sus habilidades, esta guía tiene algo para ti.

Seleccionando la imagen a redimensionar

Lo primero que debes hacer es seleccionar la imagen que deseas redimensionar. Puede ser una imagen que ya esté presente en tu página web o una nueva que desees añadir. Una vez que hayas seleccionado la imagen, necesitarás agregarla a tu archivo HTML.

Código de la imagen en HTML

Para agregar la imagen a tu archivo HTML, usarás la etiqueta <img>. Esta etiqueta tiene un atributo src (fuente), que se utiliza para especificar la ruta de la imagen. El código se vería así:

<img src="ruta-de-tu-imagen.jpg">	

Al hablar de img src, es importante mencionar que la "ruta" puede ser una URL directa de la imagen si está alojada en otro sitio, o una ruta del archivo dentro de tu sitio web si la imagen se encuentra en el mismo servidor.

Asignando una clase o un ID a la imagen

Para redimensionar la imagen con CSS, necesitas una forma de seleccionarla. Aquí es donde entran en juego las clases y los ID en HTML. Son una forma de marcar elementos específicos en tu código, y puedes usarlos para aplicar estilos CSS a esos elementos.

Clase e ID en HTML

Para asignar una clase a la imagen, debes agregar el atributo class a la etiqueta <img> de esta manera:

<img src="ruta-de-tu-imagen.jpg" class="mi-clase">

De forma similar, para asignar un ID a la imagen, debes agregar el atributo id a la etiqueta <img> de esta manera:

<img src="ruta-de-tu-imagen.jpg" id="mi-imagen">

Es importante recordar que aunque puedes usar tanto clases como ID para seleccionar elementos en CSS, hay algunas diferencias entre ellos. Un ID es único y solo puede aplicarse a un elemento en una página, mientras que una clase puede aplicarse a varios elementos.

Redimensionando la imagen con CSS

El atributo "width" y "height" en CSS

Una vez que hayas seleccionado la imagen con una clase o un ID, puedes usar CSS para redimensionarla. Las propiedades width (ancho) y height (alto) son las que se utilizan para este propósito. Por ejemplo, si asignaste una clase a tu imagen, puedes hacer lo siguiente:

.mi-clase { width: 500px; height: 300px; }

Si asignaste un ID a tu imagen, el código sería similar, solo que el ID se selecciona con un signo de número (#) en lugar de un punto:

#mi-imagen { width: 500px; height: 300px; }

Esto redimensionará tu imagen a 500 píxeles de ancho y 300 píxeles de alto.

Ajustar el tamaño de una imagen: Manteniendo las proporciones

Es importante recordar que si solo especificas el ancho o el alto, la otra dimensión se ajustará automáticamente para mantener las proporciones de la imagen. Esta es una función útil para evitar la distorsión de la imagen. Pero si quieres que la imagen tenga un tamaño específico sin tener en cuenta las proporciones, debes especificar tanto el ancho como el alto.

Propiedades adicionales de CSS para redimensionar imágenes

En CSS, hay otras propiedades que puedes usar para controlar el tamaño de las imágenes. Aquí te presentamos algunas:

Max Width y Max Height

Las propiedades max-width y max-height en CSS se utilizan para establecer el ancho y la altura máxima de un elemento, respectivamente. Son útiles cuando quieres que un elemento, como una imagen, sea sensible y cambie su tamaño dependiendo del tamaño de la pantalla o del contenedor en el que se encuentra.

.mi-clase { max-width: 100%; }

En este ejemplo, el ancho de la imagen nunca superará el 100% del ancho de su contenedor, lo que significa que la imagen se ajustará si el contenedor es más pequeño que el ancho de la imagen.

Object Fit

La propiedad object-fit es otra propiedad útil de CSS para redimensionar imágenes. Esta propiedad define cómo se debe escalar un objeto (como una imagen o un video) para ajustarse a su contenedor.

Existen varios valores para object-fit: fill, contain, cover, none, scale-down. Cada uno de estos valores ajusta la imagen de manera diferente, permitiéndote tener un control más detallado sobre cómo se redimensiona tu imagen.

.mi-clase { object-fit: cover; }

En este ejemplo, cover hace que la imagen se redimensione para cubrir completamente el contenedor, manteniendo sus proporciones, aunque parte de la imagen pueda quedar fuera del contenedor si las proporciones de este no coinciden con las de la imagen.

Conclusión

A lo largo de este tutorial, hemos abordado varios aspectos importantes del redimensionamiento de imágenes con CSS. Hemos explorado cómo seleccionar imágenes utilizando clases e ID, cómo usar las propiedades width y height para cambiar el tamaño de las imágenes y cómo utilizar