Saltar al contenido principal Saltar a la navegación de la documentación
Ver en GitHub

Ajuste de objeto

Utiliza las utilidades de ajuste de objetos para modificar el contenido de un elemento reemplazado, como un <img> o <video>, debe cambiarse de tamaño para que se ajuste a su contenedor.

En esta página

Cómo funciona.

Cambiar el valor de object-fit (propiedad) con nuestras clases de utilidad responsive object-fit. Esta propiedad le indica al contenido que llene el contenedor padre de varias maneras, como preservando la relación de aspecto o estirándolo 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 reducir la escala)
  • none

Ejemplos

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

Placeholder : Object fit contain Placeholder : Object fit cover Placeholder : Object fit fill Placeholder : Object fit scale down Placeholder : Object fit none
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="...">

Responsive

También existen variaciones responsive 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 obtener varios efectos según sea necesario.

Placeholder : Contain on sm Placeholder : Contain on md Placeholder : Contain on lg Placeholder : Contain on xl Placeholder : Contain on xxl
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 responsive .object-fit-{breakpoint}-{value} también funciona con 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 objetos 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,
  )
),