Responsive Web Design - Images

---

---

Usando la propiedad width

Si la propiedad width se establece con un % y la propiedad height se establece en auto, la imagen responderá y se ampliará hacia arriba y hacia abajo:

Ejemplo:

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

Ver ejemplo

Observe que en el ejemplo anterior, la imagen se puede ampliar para que sea mayor que su tamaño original. Una mejor solución, en muchos casos, será utilizar la propiedad max-width.

---

Usando la propiedad max-width

Si la propiedad max-width se establece en 100%, la imagen se reducirá si es necesario, pero nunca se ampliará para ser mayor que su tamaño original:

Ejemplo:

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

Ver ejemplo

---

Agregue una imagen a la página web de ejemplo

Ahora vamos a agregar una imagen a la página web de ejemplo.

Ejemplo:

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

Ver ejemplo

---

Imágenes de fondo

Las imágenes de fondo también pueden responder al cambio de tamaño y escala.

Aquí mostraremos tres métodos diferentes:

1. Si la propiedad background-size se establece en contain, la imagen de fondo se escalará e intentará ajustarse al área de su contenido. Sin embargo, la imagen mantendrá su relación de aspecto (la relación proporcional entre el ancho y el alto de la imagen):

   

   Aquí está el código CSS:

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

   Ver ejemplo

   ---

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

   

   Aquí está el código CSS:

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

   Ver ejemplo

   ---

3. Si la propiedad background-size se establece en cover, la imagen de fondo se escalará para cubrir toda el área de contenido. Tenga en cuenta que el valor cover mantiene la relación de aspecto y es posible que parte de la imagen de fondo se recorte:

   

   Aquí está el código CSS:

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

   Ver ejemplo

---

Diferentes imágenes para diferentes dispositivos

Una imagen grande puede ser perfecta en una pantalla de computadora grande, pero inútil en un dispositivo pequeño. ¿Por qué cargar una imagen grande cuando de todos modos tienes que reducirla? Para reducir la carga, o por cualquier otro motivo, puedes utilizar media queries para mostrar diferentes imágenes en diferentes dispositivos.

Aquí hay una imagen grande y una imagen más pequeña que se mostrarán en diferentes dispositivos:

Ejemplo:

/* For width smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

Ver ejemplo

---

Puedes utilizar el media query min-device-width, en lugar de min-width, que verifica el ancho del dispositivo, en lugar del ancho del navegador. Entonces la imagen no cambiará cuando cambie el tamaño de la ventana del navegador:

Ejemplo:

/* For devices smaller than 400px: */
body {
  background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

Ver ejemplo

---

El elemento HTML <picture>

El elemento <picture> le da a los desarrolladores web más flexibilidad a la hora de especificar recursos de imágenes.

El uso más común del elemento <picture> será para imágenes utilizadas en diseños responsivos. En lugar de tener una imagen ampliada o reducida según el ancho del viewport, se pueden diseñar varias imágenes para llenar mejor el viewport del navegador.

El elemento <picture> funciona de manera similar a los elementos <video> y <audio>. Configuras diferentes fuentes y la primera fuente que se ajusta a las preferencias es la que se utiliza:

Ejemplo:

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

Ver ejemplo

El atributo srcset es obligatorio y define el origen de la imagen.

El atributo media es opcional, y acepta media queries que se encuentran en CSS @media rule.

También debes definir un elemento <img> para los navegadores que no admiten el elemento <picture>.

---

Traducido con 💚 desde W3Schools.com