Multimedia responsive

Introducción

Las imágenes y los vídeos son elementos clave en la web moderna. Pero sin una estrategia responsive adecuada, pueden romper el diseño o comportarse de forma inesperada. Hoy nos centraremos en los aspectos esenciales para controlar su comportamiento visual y adaptarlos a distintos dispositivos de forma elegante y moderna.

Contenido que fluye

Imágenes

Para que una imagen no desborde su contenedor:

<img src="https://picsum.photos/200/300" />

img {
  max-width: 100%;
  width: 300px;
  height: auto;
  display: block;
}

• max-width: 100% evita que sobrepase el ancho del contenedor.
• width: 300px es el tamaño máximo que queremos.
• height: auto mantiene la proporción.
• display: block elimina espacios fantasmas generados por img inline.

Contenedores

Usamos la misma técnica, pero en este caso para contener imágenes/vídeos y mantener estructura:

.media-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

Object-fit: controlando la apariencia

La propiedad object-fit permite definir cómo se redimensiona el contenido de reemplazo (<img>, <video>, etc.) dentro de su contenedor.

Las dimensiones de la imagen ya no tienen que ser un match exacto respecto a su contenedor.

object-fit no solo se usa para ocupar todo el contenedor, sino para controlar cómo se comporta una imagen (o vídeo) dentro de un contenedor con dimensiones explícitas, especialmente cuando la proporción del contenido no coincide con la del contenedor.

Valores comunes de object-fit:

Cuándo usarlo

• Solo tiene efecto si el contenido (imagen/vídeo) tiene un width y height definidos o heredados del contenedor.
  • Si no hay dimensiones claras, object-fit no tiene con qué trabajar.
• El contenedor debe tener un tamaño definido (por CSS o por el flujo de documento), para que haya una “referencia” sobre cómo encajar el contenido.
• Ejemplos:
  • Imagen decorativa que debe rellenar toda una tarjeta (cover).
  • Mostrar una imagen sin recorte, aunque no llene todo el espacio (contain).
  • Imagen debe estirarse para llenar sí­ o sí­, aunque se deforme (fill).
  • Mostrar la imagen a su tamaño natural (none).
  • Redimensionar solo si es más grande que el contenedor (scale-down).

Cuándo no usarlo

• No tienes definido el tamaño del contenedor.
• Quieres que la imagen fluya naturalmente en el layout (usa entonces solo width: auto o max-width: 100% como ya hemos visto).

Ejemplo:

<h2>Natural image size</h2>
<img src="https://picsum.photos/200/300" />

<h2>No object-fit</h2>
<div class="card">
    <img class="default" src="https://picsum.photos/200/300" />
</div>

<h2>object-fit: cover</h2>
<div class="card">
    <img class="cover" src="https://picsum.photos/200/300" />
</div>

<h2>object-fit: contain</h2>
<div class="card">
    <img class="contain" src="https://picsum.photos/200/300" />
</div>

<h2>object-fit: fill</h2>
<div class="card">
    <img class="fill" src="https://picsum.photos/200/300" />
</div>

<h2>object-fit: none</h2>
<div class="card">
    <img class="none" src="https://picsum.photos/200/300" />
</div>

<h2>object-fit: scale-down</h2>
<div class="card">
    <img class="scale-down" src="https://picsum.photos/200/300" />
</div>

.card {
    background-color: gray;
    width: 300px;
    height: 200px;
    margin-bottom: 20px;
}

.card img {
    width: 100%;
    height: 100%;
    border: 3px solid black;
    display: block;
}

img.default {
    /* No object-fit applied */
}
img.cover {
    object-fit: cover;
}
img.contain {
    object-fit: contain;
}
img.fill {
    object-fit: fill;
}
img.none {
    object-fit: none;
}
img.scale-down {
    object-fit: scale-down;
}

Alineación con object-position

Permite alinear el contenido cuando object-fit recorta:

img {
  object-fit: cover;
  object-position: top left; /* or center, bottom, etc. */
}

Aspect Ratio: mantener proporciones

CSS moderno permite usar aspect-ratio para mantener relaciones como 16:9 o 1:1.

<div class="video-wrapper">
  <video controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 600px;
  background-color: black;
  overflow: hidden;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Esto evita usar padding hacks y es ideal para vídeos e imágenes.

Videos embebidos responsive (YouTube, etc.)

Cuando se usa <iframe>, puedes envolverlo en un contenedor con aspect-ratio:

<div class="video-wrapper">
  <iframe
    width="300"
    height="200"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    frameborder="0"
    allowfullscreen
  >
  </iframe>
</div>

.video-wrapper {
  aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

Enlaces últiles

• MDN: Responsive images
• MDN: object-fit
• MDN: object-position
• MDN: aspect-ratio