Utilitários

Object-Fit

Controle o preenchimento de imagens e vídeos dentro de um container de tamanho fixo, sem distorcer a proporção original — mesma imagem retangular em todos os exemplos abaixo.

1. Preenchimento — .of-*

.of-cov (cover)

.of-con (contain)

.of-fil (fill)

.of-non (none)

.of-scd (scale-down)

2. Posição do Foco — .op-*

Combine com .of-cov para escolher qual parte da imagem fica visível quando o recorte é apertado.

.op-ct (center)

.op-t (top)

.op-b (bottom)

.op-l (left)

.op-r (right)