Atributo objectFit del estilo

Definición y uso

objectFit Atributo utilizado para especificar cómo ajustar el tamaño de <img> o <video> para que se ajuste a su contenedor.

Esta propiedad indica cómo llenar el contenedor con contenido de múltiples maneras; por ejemplo, "mantener la relación de aspecto" o "estirarse y ocupar el espacio lo más posible".

Vea también：

Tutorial de CSS：CSS object-fit

Manual de referencia de CSS：Atributo object-fit

Ejemplo

Corte los lados de la imagen, manteniendo la relación de aspecto y llenando el espacio：

document.getElementById("myImg").style.objectFit = "cover";

Pruebe usted mismo

Sintaxis

Retornar atributo objectFit：

object.style.objectFit

Configurar atributo objectFit：

object.style.objectFit = "fill|contain|cover|scale-down|none|initial|inherit"

Valor del atributo

Valor Descripción
fill Predeterminado. Ajuste el tamaño del contenido sustituido para llenar el cuadro de contenido del elemento. Si es necesario, el objeto se estira o comprime.
contain Escala el contenido sustituido para mantener su relación de aspecto, al mismo tiempo que se ajusta al cuadro de contenido del elemento.
cover Ajuste el tamaño del contenido sustituido para mantener su relación de aspecto mientras se ajusta al cuadro de contenido del elemento completo. El objeto será recortado.
none El contenido sustituido 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 más pequeño entre los dos.
initial Establezca este atributo en su valor predeterminado. Consulte initial。
inherit Hereda este atributo de su elemento padre. Consulte inherit。

Detalles técnicos

Valor predeterminado： fill
Valor de retorno： Una cadena que representa el Atributo object-fit。
Versión de CSS： CSS3

Compatibilidad del navegador

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

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