object-fit (_vendor.scscs)

Tipo: Mixin

Versión: 2.x.x

Mixin vendor de SISASS para la propiedad object-fit.

Define cómo se ajusta una imagen o un video dentro de su contenedor. Aplica el prefijo histórico -o- y después agrega la propiedad estándar.

Interface 

@mixin object-fit($br);

Parámetros secuenciales

Parámetro Tipo Default Descripción
br Keyword | String - Define el valor que se asignará a la propiedad object-fit.

Ejemplo

En este ejemplo, ambas imágenes comparten el mismo contenedor. La segunda usa el valor cover, por lo que llena el área visible sin deformarse, aunque recorta parte del contenido.

test object-fit
test object-fit

            


            

                

            


            

                
<div class="object_fit_example">
    <div class="frame"><img class="img" src="img/test/1.webp" alt="test object-fit" /></div>
    <div class="frame"><img class="img cover" src="img/test/1.webp" alt="test object-fit" /></div>
</div>