post

Alinhar imagem no centro com object-fit cover e display flex CSS

Publicado em: 09/08/2022

Categorias: BlogCSS

Muitas vezes é preciso desenvolver um “box” onde vai ficar uma imagem, de um produto por exemplo.

Porem, a medida do box criado é quadrada (1×1), mas o usuário ou cliente, acaba subindo imagens com tamanhos desproporcionais, como imagens com altura maior que a largura, ou vice-e-versa.

Desse jeito, esse box fica desproporcional, resultando em um layout mau estruturado.

Para isso, é possível usar o código abaixo para que sua imagem, seja do tamanho que for, ela continuar dentro do tamanho do box.

.box {
    object-fit: cover;
    height: 200px; /* Medida da altura do container que deseja usar */
    display: flex;
    align-items: center;
    justify-content: center;
}

.box img {
    width: auto;
    max-width: 200px;
    max-height: 200px; /* Adicione a mesma medida aqui, como limite da imagem */
}

Veja o exemplo: https://Alinhar-imagem-no-centro-com-object-fit-cover-e-display-flex.brunoalbim.repl.co

Veja o código usado no exemplo acima:

Sem usar o CSS (exemplo 1):
<center style="max-width: 200px">
  <div style="background: #ff0066">
    <img src="https://i.postimg.cc/j2HjrJ0n/Group-3-2.png">
  </div>
  Sem usar o CSS (exemplo 2):
  <div style="background: #ff0066">
    <img src="https://i.postimg.cc/WpgzZxFp/Group-4.png">
  </div>
  
  <hr>
  
  Usando o CSS (exemplo 1):
  <div class="box" style="background: #ff0066">
    <img src="https://i.postimg.cc/j2HjrJ0n/Group-3-2.png">
  </div>
  Usando o CSS (exemplo 2):
  <div class="box" style="background: #ff0066">
    <img src="https://i.postimg.cc/WpgzZxFp/Group-4.png">
  </div>
</center>


<style>
.box {
    object-fit: cover;
    height: 200px; /* Medida da altura do container que deseja usar */
    display: flex;
    align-items: center;
    justify-content: center;
}

.box img {
    width: auto;
    max-width: 200px;
    max-height: 200px; /* Adicione a mesma medida aqui, como limite da imagem */
}
</style>

Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1890

ID de Referência: 1890

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários