How to ensure that an image is centralized and responsive

2

Good morning!

I would like to know how I can do with CSS so that an image is centralized so that it is responsive to all monitors .

    
asked by anonymous 22.09.2017 / 15:42

3 answers

2

Well, to be responsive, in addition to margin: 0 auto; , you need to leave the image with display: block; and, more important, max-width: 100%; . Thus, images larger than the screen are resized.

link

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"/><imgsrc="http://www.icmbio.gov.br/portal/images/stories/imgs-unidades-coservacao/queimada_grande.jpg" />
</div>
    
22.09.2017 / 19:04
2

link View this fiddle, what I did was as follows

I added margin: 0 auto and text-align:center , this will already center any div on any monitor, the rest was just demo

    
22.09.2017 / 18:40
2

Well, first of all, to make a picture responsive, you'll need the following pattern for the img element:

For displaying images that are wider than tall

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

For displaying images that are taller than they are wide

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

After setting this default, set the following defaults for the parent element:

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;
}

The CSS above will set the size of the image display box. After this, the image should receive the following properties:

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

This will cause the image to start in the center of the parent div, but the transform will make the center of the image align to the center of the parent div.

As described above, below is the functional example in a 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>
  • Open the image in a new tab, you will see the full size of it, it has the automatic cut that makes it responsive

Any questions, I'm here to help

    
22.09.2017 / 19:38