Como centralizar uma imagem usando o alinhamento de texto: Centralizar

Um elemento é um elemento embutido (valor de exibição de inline-block). Ele pode ser facilmente centralizado adicionando a text-align: center;propriedade CSS ao elemento pai que o contém.

Para centralizar uma imagem usando, text-align: center;você deve colocar o interior de um elemento de nível de bloco, como um div. Uma vez que a text-alignpropriedade se aplica apenas a elementos de nível de bloco, você posiciona text-align: center;no elemento de nível de bloco envolvente para obter uma centralização horizontal .

Exemplo

   Center an Image using text align center  .img-container { text-align: center; }

Observação: o elemento pai deve ser um elemento de bloco. Se não for um elemento de bloco, você deve adicionar adisplay: block;propriedade CSS junto com atext-alignpropriedade.

   Center an Image using text align center  .img-container { text-align: center; display: block; }

Demo: Codepen

Object Fit

Depois que sua imagem estiver centralizada, você pode redimensioná-la. A object-fitpropriedade especifica como um elemento responde à largura / altura de sua caixa pai.

Esta propriedade pode ser usada para imagem, vídeo ou qualquer outra mídia. Também pode ser usado com a object-positionpropriedade para obter mais controle sobre como a mídia é exibida.

Basicamente, usamos a object-fitpropriedade para definir como ela estica ou espreme uma mídia embutida.

Sintaxe

.element

Valores

  • fill: Este é o valor padrão . Redimensione o conteúdo para coincidir com sua caixa pai, independentemente da proporção.
  • contain: Redimensione o conteúdo para preencher sua caixa pai usando a proporção correta.
  • cover: semelhante, containmas frequentemente cortando o conteúdo.
  • none: exibe a imagem em seu tamanho original.
  • scale-down: compare a diferença entre nonee containpara encontrar o menor tamanho de objeto de concreto.

Compatibilidade do navegador

O object-fité compatível com a maioria dos navegadores modernos, para obter as informações mais atualizadas sobre compatibilidade, você pode verificar //caniuse.com/#search=object-fit.

Documentação

  • alinhamento de texto - MDN
  • ajuste ao objeto - MDN
  • - MDN