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í:

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:

Puedes probar el resultado en este enlace. 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.


Relacionado:  Exportar tabla HTML a Excel con JavaScript

Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 707 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: