En este post sobre diseño responsivo en CSS te mostraré cómo hacer que una imagen sea responsiva o responsive. Es decir, que se adapte a cualquier tamaño de pantalla.

Hacer una imagen adaptable es útil cuando no usamos frameworks de diseño como Bootstrap, Bulma, etcétera, y queremos que la imagen sea responsiva.

¿En qué ayuda una imagen responsiva?

Una imagen responsiva se adapta a la pantalla. Esto se hace sobre todo para que, si la imagen es más ancha que la pantalla, la misma se ajuste y se muestre completa, manteniendo su relación de aspecto.

Hacer imagen responsiva

Este es el truco que yo siempre aplico. Es básicamente hacer que:

• La altura sea automática
• La anchura sea del 100 %

La desventaja que tiene es que, si la pantalla es más ancha que la imagen, la misma se va a estirar para llenar la pantalla. Esto se puede solucionar con max-width para que, si la pantalla es más ancha, la imagen mantenga su tamaño.

En CSS esto se traduce así:

.imagen-1{
 width: 100%;
 height: auto;
 max-width: 2000px;
}

En este caso mi imagen mide 2000 pixeles. Se ajustará a la pantalla pero si la misma está más ancha que la imagen, esta última mantendrá su tamaño original. En este caso la imagen es:

  <h1>Imagen 1</h1>
  <img class="imagen-1" src="https://picsum.photos/2000" alt="Imagen 1">

Verás que la imagen se adapta a varias pantallas, y solo deja de ocupar el 100 % cuando la pantalla mide más de 2000 pixeles. Esto depende también del tamaño de la imagen.