Cómo crear: imágenes responsivas

Aprende a crear imágenes responsivas usando CSS.

Las imágenes responsivas se ajustarán automáticamente para adaptarse al tamaño de la pantalla.

Ajusta el tamaño de la ventana del navegador para ver el efecto de respuesta:

Luces

Ver el efecto

Cómo crear imágenes responsivas

Primer paso - Añadir HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

Segundo paso - Añadir CSS:

Si deseas que la imagen sea responsiva y pueda ampliar y reducirse, configura el CSS width El atributo se establece a 100%,height Establecer a auto:

Ejemplo

.responsive {
  width: 100%;
  height: auto;
}

Prueba personalmente

Si deseas que la imagen se reduzca cuando sea necesario, pero nunca se amplíe más de su tamaño original, usa max-width: 100%:

Ejemplo

.responsive {
  max-width: 100%;
  height: auto;
}

Prueba personalmente

Si deseas limitar el tamaño máximo de la imagen responsiva, usa max-width Atributos y el valor de píxeles que has elegido:

Ejemplo

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

Prueba personalmente

Páginas relacionadas

Tutoriales:CSS de imagen

Tutoriales:Diseño web responsivo CSS