Preencher Caixa (Cover)

Escale e corte imagens para preencher completamente dimensões exatas sem espaço vazio—equivalente ao comportamento CSS object-fit: cover. Diferente do ajuste "contain" que pode deixar espaço vazio, "cover" garante que cada pixel da sua área alvo é preenchido com conteúdo de imagem, cortando qualquer excesso que se estenda além dos limites. O resultado são imagens perfeitamente dimensionadas que preenchem seus containers completamente.

O algoritmo escala a imagem para que sua dimensão menor corresponda à dimensão alvo correspondente, então corta o overflow da dimensão maior. Para uma imagem paisagem ajustando um alvo quadrado, a imagem escala até sua altura corresponder à altura alvo, então os lados são cortados. Você controla onde o corte centraliza: corte central padrão preserva o meio da imagem, mas você pode deslocar o ponto focal para proteger rostos, produtos ou outras áreas importantes de serem cortadas.

Desenvolvedores de e-commerce criando miniaturas de grade de produtos produzem tamanhos de imagem uniformes de fotografia de produtos variada—seja a fonte retrato, paisagem ou quadrada, a grade exibe dimensões consistentes. Designers de banner hero preenchendo seções de largura total com imagens de fundo alcançam cobertura de borda a borda em alturas especificadas.