Diseño de página web responsive - Imágenes

Uso del atributo width

Si width Si se establece el atributo en porcentajes y la altura en "auto", la imagen se ajustará para ampliar o reducir:

Ejemplo

img {
  width: 100%;
  height: auto;
}

Pruebe usted mismo

Tenga en cuenta que en el ejemplo anterior, la imagen puede ampliar más allá de su tamaño original. En la mayoría de los casos, una solución mejor es cambiar a usar max-width Atributo.

Uso del atributo max-width

Si se establece el atributo max-width en 100%, la imagen se reducirá según sea necesario, pero nunca se ampliará más allá de su tamaño original:

Ejemplo

img {
  max-width: 100%;
  height: auto;
}

Pruebe usted mismo

Agregar imagen a la página de ejemplo

Ejemplo

img {
  width: 100%;
  height: auto;
}

Pruebe usted mismo

La imagen de fondo

La imagen de fondo también puede responder a la ajuste de tamaño y escala.

Estos son los tres métodos diferentes que mostramos:

1. Si se background-size Si se establece el atributo en "contener", la imagen de fondo se ajustará y tratará de coincidir con el área de contenido. Sin embargo, la imagen mantendrá su relación de aspecto (la proporción entre el ancho y la altura de la imagen):

Este es el código CSS:

Ejemplo

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Pruebe usted mismo

2. Si se background-size se establece el atributo en "100% 100%", la imagen de fondo se estirará para cubrir toda la área de contenido:

Este es el código CSS:

Ejemplo

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

Pruebe usted mismo

3. Si background-size Si se establece el atributo en "cover", la imagen de fondo se escalará para cubrir toda la área de contenido. Tenga en cuenta que el valor "cover" mantiene las proporciones de anchura y altura y puede recortar una parte de la imagen de fondo:

Este es el código CSS:

Ejemplo

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Pruebe usted mismo

Preparar diferentes imágenes para diferentes dispositivos

La imagen grande se mostrará perfectamente en las pantallas de computadoras grandes, pero no será útil en dispositivos pequeños. ¿Por qué cargar una imagen grande cuando hay que reducir la imagen? Para reducir la carga o por cualquier otra razón, puede usar consultas de medios para mostrar diferentes imágenes en diferentes dispositivos.

Esta es una imagen grande y una imagen pequeña que se mostrarán en diferentes dispositivos:

Ejemplo

/* Para anchos de menos de 400 píxeles: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Para anchos de 400 píxeles o más grandes: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Pruebe usted mismo

Puede usar consultas de medios min-device-width en lugar de min-width para verificar el ancho del dispositivo en lugar del ancho del navegador. Luego, cuando ajuste el tamaño de la ventana del navegador, la imagen no cambiará:

Ejemplo

/* Para dispositivos con menos de 400 píxeles: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Para dispositivos de 400 píxeles y más grandes: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Pruebe usted mismo

elemento <picture> de HTML5

HTML5 introdujo <picture> elemento, que le permite definir múltiples imágenes.

Compatibilidad del navegador

38.0 13 38.0 9.1 25.0

<picture> El efecto del elemento es similar a <video> y <audio> Elemento. Establecimos diferentes orígenes y el primer origen con prioridad de coincidencia es el origen utilizado actualmente:

Ejemplo

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Pruebe usted mismo

srcset El atributo es obligatorio, define la fuente de la imagen.

media El atributo es opcional, acepta Regla @media CSS encontrar consultas de medios.

Consejo:También debe especificar para <picture> Definición del navegador del elemento <img> Elemento.