Ajusta el contenido para mantenerse completo dentro de su contenedor usando object-fit: contain.

Internamente también aplica width: 100% y height: 100% mediante whs(100%), por lo que el elemento ocupa todo el espacio disponible antes de calcular el ajuste visual.

Interface

@mixin contain;

Ejemplo

Resultado SCSS CSS generado HTML

<div class="contain_container">
    <img class="contain_example" src="img/test/1.webp" alt="contain" />
</div>