2

Bom dia!

Gostaria de saber como faço posso fazer com CSS para que uma imagem fique centralizada de forma que seja responsiva em todos os monitores.

1
  • 1
    Poderia compartilhar o que já tentou fazer incluindo seu HTML e CSS a sua perguntar? 22/09/2017 às 13:48

4 Respostas 4

2

Bom, para ficar responsiva, além do margin: 0 auto;, precisa deixar a imagem com display: block; e, mais imporante, max-width: 100%;. Assim, imagens maiores que a tela são redimensionadas.

https://jsfiddle.net/dudaskank/wy17vd5h/

div#responsive-imgs {
}
div#responsive-imgs img {
  display: block;
  margin: 5px auto;
  max-width: 100%;
}
<div id="responsive-imgs">
  <img src="https://lh3.googleusercontent.com/-jr0_VjsnLbk/TXgyw-U3RAI/AAAAAAAAAOM/xr23lB2vJ9o/s1600/pequena-sereia1a.gif" />
  <img src="http://www.icmbio.gov.br/portal/images/stories/imgs-unidades-coservacao/queimada_grande.jpg" />
</div>

1
  • isso não torna a imagem responsiva 22/09/2017 às 17:16
2

https://jsfiddle.net/4zhh7LnL/ Veja este fiddle, o que fiz foi o seguinte

Adicionei margin: 0 auto e text-align:center, com isto, já irá centrar qualquer div em qualquer monitor, o resto era só demonstrativo

4
  • não torna a imagem responsiva 22/09/2017 às 17:16
  • @MuriloGambôa Se definir a imagem com width: 100%, ela irá cobrir o tamanho da div, ou seja, qualquer tamanho que alterar, tem de alterar na div e não na imagem 22/09/2017 às 17:19
  • Porém, isso não a torna responsiva 22/09/2017 às 17:22
  • isso pode deixar a imagem achatada, ou até mesmo fazer com que a imagem estoure o tamanho da div pai, fazendo com que ela cubra elementos abaixo do elemento pai dela 22/09/2017 às 17:23
2

Bom, primeiramente, para deixar uma imagem responsiva, você precisará do seguinte padrão para o elemento img:

Para a exibição de imagens mais largas do que altas

img{
  min-width:100%;
  max-height:100%;
}

Para a exibição de imagens mais altas do que largas

img{
  min-height:100%;
  max-width:100%;
}

Após definir este padrão, defina os seguintes padrões para o elemento pai:

div{
  position:relative;
  overflow:hidden; /*Utilizar para não exibir o corte automático da imagem*/
  /*Deve-se definir um min-height e min-width para que a imagem apareça corretamente no local desejado, e com o tamanho desejado, por exemplo:*/
  width: 50%;
  min-height: 200px;
}

O CSS acima irá definir o tamanho da caixa de exibição da imagem. Após isso, a imagem deve receber as seguintes propriedades:

img{
   position:absolute;
   left:50%;
   top:50%;
   transform:translate(-50%,-50%);
}

Isso fará com que a imagem se inicie no centro da div pai, porém, o transform irá fazer com que o centro da imagem esteja alinhado ao centro da div pai.

Como descrito acima, segue abaixo o exemplo funcional em um Fiddle

*{
 margin:0;
 padding:0;
 box-sizing:border-box;

}
figure{
 position:relative;
 min-height:180px;
 width:160px;
 overflow:hidden;
}
figure img{
 min-width:100%;
 max-height:100%;
 position:absolute;
 left:50%;
 top:50%;
 transform:translate(-50%,-50%);
}
<figure>
  <img src="data:image/jpeg;base64,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">
</figure>

  • Abra a imagem em uma nova guia, e verá o tamanho completo dela, tem o corte automático que a torna responsiva

Qualquer dúvida, estou aqui para ajudar

0

No caso você pode usar @media screen... e dar float none (se vc tiver colocado float left ou right na img) e aplicar um margin 5px auto. ex:

.logo-2{
    float: right;
    width: 150px;
    height: 60px;
    background-image: url('../imagens/logo2.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    /*background-color: orange;*/
}

@media screen and (max-width: 510px){
        .logo-2{
            float: none;
            margin: 5px auto;

        }
}

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 .