Atributo object-fit de CSS

Definición y uso

El atributo objectFit se utiliza para especificar cómo se debe ajustar el tamaño de <img> o <video> para adaptarse a su contenedor.

Esta propiedad informa de cómo debe llenar el contenido del contenedor. Por ejemplo, 'mantener la relación de aspecto' o 'expandirse y ocupar el espacio máximo posible'.

Vea también:

Tutoriales de CSS:CSS object-fit

Manual de referencia de CSS:CSS object-position

Manual de referencia de HTML DOM:Atributo objectFit

Ejemplo

Recorte los lados de la imagen, manteniendo la relación de aspecto, luego llene el espacio:

img.a {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

Pruebe usted mismo

Sintaxis de CSS

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

Valor del atributo

Valor Descripción
fill Valor predeterminado. Ajuste el tamaño del contenido reemplazado para que ocupe todo el cuadro de contenido del elemento. Si es necesario, el objeto se estirará o comprimirá.
contain Escale el contenido reemplazado para mantener su relación de aspecto, ajustándose al cuadro de contenido del elemento.
cover Ajuste el tamaño del contenido reemplazado para que ocupe todo el cuadro de contenido del elemento de relleno, manteniendo su relación de aspecto. El objeto será recortado.
none El contenido reemplazado no se ajusta en tamaño.
scale-down El tamaño del contenido es el mismo que none o contain, dependiendo de quién obtenga el tamaño del objeto sea más pequeño.
initial Establezca este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo del elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: Consulte las propiedades individuales.
Herencia: No
Producción de animación: No se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.objectFit="cover"

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad.

Chrome IE / Edge Firefox Safari Opera
31.0 16.0 36.0 7.1 19.0