-2

Pessoal qual a melhor forma de centralizar uma imagem responsiva dentro de uma div tbm responsiva em % (no caso uma row), ou seja que não tem medidas definidas em pixels, com max-width: 100% por exemplo. Se alguém souber, queria saber pra alinhar na horizontal e na vertical, já tentei todos esses abaixo mas a imagem não centraliza no meio da row.

.logo-rodape {
max-width: 100%;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY( -50% );
-moz-transform: translateY( -50% );}
8
  • Coloque seu código completo incluindo o html e seu estilo. 7/11/2017 às 15:13
  • @felipeduarte meu html tem 400 linhas e o css 900, tem certeza? 7/11/2017 às 15:20
  • kkkk digo só a parte que você citou a imagem e seu container, e também o estilo dos mesmos. 7/11/2017 às 15:23
  • 1
  • @nunks.lol se vc perceber não tem nada a ver uma coisa com a outra, a minha questão é centralizar sem perder a responsividade, o outro assunto só trata de centralizar elemento, se tivesse a resposta para o que eu preciso, não teria aberto a pergunta. 7/11/2017 às 16:41

3 Respostas 3

1

Você pode usar uma outra técnica, com suporte já bem abrangente, que seria o object-fit. Isso vai simplificar bastante o seu código.

div {
    height: 200px;
    width: 400px;
    border: 1px solid #cde;
}

img {
    // Garante que a imagem ocupe todo o tamanho do elemento `pai`
    width: 100%;
    height: 100%;

    // Essa é a linha que faz o posicionamento
    object-fit: cover; 
}
<div>
    <img src="https://www.w3schools.com/css/trolltunga.jpg" >
</div>

Você pode ver aqui outros valores para a propriedade e ajustar conforme sua necessidade.

4
  • Vc não entendeu, não quero colocar nada em pixel, meu site é todo responsivo, se eu atribuir na div width e height em pixel, não ficará mais responsivo. Eu estou usando a img dentro de uma col-md-4 que é em %, se eu por uma div em pixel, já mato a responsividade. Essa é a questão, alinhar objetos com div em pixel é moleza, mas não quero isso. 7/11/2017 às 15:48
  • E pelo que percebi a imagem aí no seu exemplo não esta responsiva, senão não teria o scroll 7/11/2017 às 15:50
  • @ClaytonFurlanetto basta mudar para %, vh, vw, rem, em, tanto faz. A unidade não importa, o que importa é a propriedade object-fit atribuído à imagem. O problema do scroll não é do código, é do render do stackoverflow. Veja esse fiddle 7/11/2017 às 15:52
  • Não deu certo não fica centralizado no meio da row, vou desistir e controlar com margin msm nas medias queries. 7/11/2017 às 16:05
1

Centralize a imagem horizontalmente com margin: 0 auto e verticalmente com transform: translateY, e adicionando position: relative:

html, body{ height: 100%; margin: 0; padding: 0; }

.logo-rodape {
max-width: 100%;
display: flex;
margin: 0 auto;
position: relative;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
top:50%;
}
<div style="background: black; height: 100%; display: block; width: 100%;">
  <img class="logo-rodape" src="http://www.viacaosulfluminense.com.br/imagem/logo-viacao-sul-fluminense.gif" />
</div>

5
  • Mas nesse caso a imagem continuaria responsiva? Se determinarmos um valor em pixel ela já não ficaria mais responsiva, correto? 7/11/2017 às 15:21
  • Aqui não deu certo, a imagem não ficou no centro, ficou mais pra baixo, mas se eu mudar o 'height: 300px;' posso controlar, mas não é isso que eu quero, pois em dispositivos com telas menores a imagem não ficará no centro, por isso não quero colocar nenhum valor definido, nesse caso a imagem ficará responsiva, mas dependendo do tamanho da tela do dispositivo não ficará centralizada, pois tem uma altura deficida em pixel, veja como ficou: [prntscr.com/h7dpmz] 7/11/2017 às 15:41
  • vamos esquecer a responsividade, eu controlo depois nas media queries, testa pra somente deixar ela centralizada, independente do tamanho da div. 7/11/2017 às 15:43
  • @ClaytonFurlanetto vc quer centralizar verticalmente apenas?
    – Sam
    7/11/2017 às 16:14
  • @ClaytonFurlanetto Eu botei a div 300px só como exemplo. Com o código acima, não importa a altura da div, ficará sempre no centro. Mas alterei a div pra 100%;
    – Sam
    7/11/2017 às 16:21
0

Outra forma seria essa, mas bem crua, nem certa ou errada, apenas uma demonstração:

.div {
background: black;
max-width: 100%;
}
.logo {
margin: 0 auto;
display: block;
}
<div class="div">
<img class="logo" src="http://vanimg.s3.amazonaws.com/good-logos-5.jpg" height="30" />
</div>

<hr>

<div class="div" style="padding: 25px 0; border: 1px solid red;">
<img class="logo" src="http://vanimg.s3.amazonaws.com/good-logos-5.jpg" height="30" />
</div>

Escrever uma estrutura css do zero é bem trabalhoso porem o conhecimento é válido, mas quando se fala em tempo e custo é preciso de uma boa equipe para fazer estruturas do tipo:

As bibliotecas mais usadas hoje em dia.

É isso, boas praticas e bons estudos.

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .