1.6 KiB
title | localeTitle |
---|---|
Object Fit | Ajuste de objeto |
Ajuste de objeto
La propiedad de object-fit
especifica cómo responde un elemento al ancho / alto de su caja principal.
Esta propiedad se puede utilizar para imágenes, videos o cualquier otro medio. También se puede usar con la propiedad de object-position
para obtener un mayor control sobre cómo se muestran los medios.
Básicamente, usamos la propiedad de object-fit
para definir cómo se estira o aplasta un medio en línea.
Sintaxis
.element {
object-fit: fill || contain || cover || none || scale-down;
}
Valores
-
fill
: este es el valor predeterminado . Cambiar el tamaño del contenido para que coincida con su cuadro principal, independientemente de la relación de aspecto. -
contain
: cambia el tamaño del contenido para llenar su casilla principal utilizando la relación de aspecto correcta. -
cover
: similar acontain
pero a menudo recortando el contenido. -
none
: muestra la imagen en su tamaño original. -
scale-down
: compare la diferencia entrenone
ycontain
para encontrar el tamaño de objeto concreto más pequeño.
Compatibilidad del navegador
El object-fit
es compatible con la mayoría de los navegadores modernos. Para obtener la información más actualizada sobre compatibilidad, puede consultar esto en http://caniuse.com/#search=object-fit
También hay un polyfill para el navegador no compatible (en su mayoría IE). https://github.com/anselmh/object-fit
Más información
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit https://drafts.csswg.org/css-images-3/#the-object-fit