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.
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.
Este es el truco que yo siempre aplico. Es básicamente hacer que:
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.
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.