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.