Agregado en v5.3 Ver en GitHub

Ajuste de objeto (Object fit)

Utiliza las utilidades de ajuste de objeto (object fit) para modificar cómo se debe redimensionar el contenido de un elemento reemplazado, como un <img> o <video>, para adaptarse a su contenedor.

En esta página

Cómo funciona

Cambia el valor de la propiedad object-fit con nuestras clases de utilidad object-fit responsivas. Esta propiedad le indica al contenido que llene el contenedor padre de varias formas, como conservando la relación de aspecto o estirándose para ocupar tanto espacio como sea posible.

Las clases para el valor de object-fit se nombran usando el formato .object-fit-{value}. Elige entre los siguientes valores:

contain
cover
fill
scale (para scale-down)
none

Ejemplos

Agrega la clase object-fit-{value} al elemento reemplazado:

Placeholder: Ajuste de objeto scale down

html

<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">

Responsivo

También existen variantes responsivas para cada valor de object-fit usando el formato .object-fit-{breakpoint}-{value}, para las siguientes abreviaturas de puntos de interrupción: sm, md, lg, xl y xxl. Las clases se pueden combinar para varios efectos según lo necesites.

html

<img src="..." class="object-fit-sm-contain border rounded" alt="...">
<img src="..." class="object-fit-md-contain border rounded" alt="...">
<img src="..." class="object-fit-lg-contain border rounded" alt="...">
<img src="..." class="object-fit-xl-contain border rounded" alt="...">
<img src="..." class="object-fit-xxl-contain border rounded" alt="...">

Video

Las utilidades .object-fit-{value} y las utilidades responsivas .object-fit-{breakpoint}-{value} también funcionan en elementos <video>.

<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>

CSS

API de utilidades de Sass

Las utilidades de ajuste de objeto (object fit) se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss

"object-fit": (
  responsive: true,
  property: object-fit,
  values: (
    contain: contain,
    cover: cover,
    fill: fill,
    scale: scale-down,
    none: none,
  )
),