1.6 KiB

Raw Blame History

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 a contain pero a menudo recortando el contenido.
none : muestra la imagen en su tamaño original.
scale-down : compare la diferencia entre none y contain 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

1.6 KiB Raw Blame History