How to ensure an image is centralized and responsive

Asked

Viewed 4,366 times

2

Good morning!

I wonder how I can do with CSS so that an image is centered in a way that is responsive in all monitors.

html css
  • 1

    You could share what you’ve already tried including your HTML and CSS to ask?

4 answers

2

https://jsfiddle.net/4zhh7LnL/ Look at this fiddle, what I did was this

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

  • does not make the image responsive

  • @Murilogambôa If you set the image with width: 100%, it will cover the size of the div, I mean, whatever size you change, you have to change in div and not in the picture

  • But that doesn’t make it responsive

  • this can flatten the image, or even cause the image to burst the size of the parent div, causing it to cover elements below the parent element

2


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

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>

  • this does not make the image responsive

2

Well, first, to leave a responsive image, you’ll need the following pattern for the element img:

For displaying wider than higher images

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

For displaying images higher than wide

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

After setting this pattern, set the following patterns 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 define the size of the image display box. After that, 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, however, Transform will cause the center of the image to be aligned to the center of the parent div.

As described above, below follows 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, and you’ll see the full size of it, it has auto-cut that makes it responsive

Any questions, I’m here to help

0

In case you can use @media screen... and give None float (if you have placed left or right float in img) and apply a 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;

        }
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.