Imagens HTML podem vazar: entenda object-fit e border-radius
A imagem como contêiner e conteúdo
O elemento HTML <img> não é apenas uma superfície que exibe uma imagem. Ele é um elemento substituído: funciona como um contêiner definido pelo CSS, enquanto o recurso indicado por src atua como seu conteúdo, com dimensões naturais próprias. Essa relação permite falar em transbordamento, mesmo que o elemento não contenha outros elementos HTML.
Como o conteúdo transborda
Nos navegadores, o overflow aplicado por padrão ao elemento é clip, que recorta o conteúdo excedente. Esse comportamento fica evidente com object-fit: cover. A propriedade preserva a proporção intrínseca da imagem, mas pode fazer com que o conteúdo fique maior que a área do elemento; por padrão, as partes excedentes são recortadas. Se overflow: visible for definido, esse conteúdo pode aparecer fora do contêiner.
O border-radius produz outro caso: como a imagem continua sendo retangular, seu conteúdo pode ultrapassar visualmente os cantos arredondados. Já object-position, como em object-position: 50px 0, desloca o conteúdo da imagem sem mover o elemento que o contém, criando novamente uma área de transbordamento.
O papel de object-fit
Além dos conhecidos valores cover e contain, a propriedade aceita none. Nesse caso, o conteúdo substituído não é redimensionado para caber na caixa de conteúdo do elemento. Se uma imagem com dimensão natural de 300 por 300 for colocada em um <img> dimensionado, por exemplo, com width: 80vw e height: 80vh, ela mantém seu tamanho intrínseco. Assim, poderá transbordar quando o elemento for menor que a imagem.
O valor padrão de object-fit é fill, que faz o efeito oposto: redimensiona o conteúdo para preencher a caixa de conteúdo do elemento, independentemente de suas dimensões naturais. O artigo ressalta que o elemento e o recurso têm tamanhos que podem ser controlados separadamente, embora o conteúdo de elementos substituídos esteja fora do modelo comum de formatação do CSS. Suas dimensões naturais, contudo, participam de vários cálculos de layout.
Aplicações e ressalvas
A publicação apresenta demonstrações de efeitos de foco, transições, animações tridimensionais, revelação de imagens, animações de entrada com @starting-style, um carregador de tela e uma decoração com corner-shape, indicada como disponível apenas no Chrome naquele momento. Um dos exemplos usa object-fit: none e anima object-position nos eixos horizontal e vertical; animation-composition: add permite combinar esses movimentos.
Esses efeitos também podem ser construídos com técnicas mais convencionais. A vantagem apontada é dispensar elementos ou pseudo-elementos adicionais, algo útil quando não é possível alterar a estrutura HTML. Nos comentários, um leitor observa que os exemplos podem ser recentes e que versões ESR ou estáveis baseadas em Firefox mais antigo talvez ainda recortem o conteúdo nos limites do elemento.
A conclusão é que o <img> esconde mecanismos pouco percebidos, mas aproveitáveis para criar efeitos visuais somente com CSS. O texto não recomenda necessariamente essas técnicas menos intuitivas; apresenta-as como alternativas para compreender e explorar o comportamento de imagens.