How to center an img within a div, both responsive, without losing responsiveness?

Asked

Viewed 2,143 times

-2

Personal what is the best way to center a responsive image within a responsive divtbm in % (in the case of a Row), that is to say that it has measures defined in pixels, with max-width: 100% for example. If anyone knows, wanted to know to align horizontally and vertically, I’ve tried all these below but the image does not center in the middle of 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% );}
css responsive img

  • Put your full code including html and your style.

  • @felipeduarte my html has 400 lines and the css 900, is sure?

  • kkkk I say only the part you quoted the image and your container, and also the style of the same.

  • 1

    Possible duplicate of How best to center an element vertically and horizontally?

  • @nunks.lol if you realize has nothing to do with one another, my question is to centralize without losing responsiveness, the other subject only comes to centralize element, if had.

  • @Claytonfurlanetto Putz guy, so specify a little better what you need. Judging from your comments on the answers, I’m not the only one who didn’t understand your question. Maybe present your problem with a minimum, complete and verifiable example help people provide you with an answer that suits you.

  • Hello, The ideal is to use the image as the background of your div. .

  • @nunks.lol I will specify: How to center an object horizontally and vertically within a div, leaving the div and the responsive image.

Show 3 more comments

3 answers

1

Center the image horizontally with margin: 0 auto and vertically with transform: translateY, and adding 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>

  • But in this case the image would remain responsive? If we set a pixel value it would no longer be responsive, correct?

  • It didn’t work here, the image wasn’t in the center, it was lower, but if I change the height: 300px;' I can control, but that’s not what I want, because in devices with smaller screens the image won’t be in the center, so I don’t want to put any set value, In this case the image will be responsive, but depending on the screen size of the device will not be centralized, because it has a missing pixel height, see how it looked: [http://prntscr.com/h7dpmz]

  • let’s forget responsiveness, I control it later in the media queries, test to only leave it centralized, regardless of the size of the div.

  • @Claytonfurlanetto vc wants to center vertically only?

  • @Claytonfurlanetto I put the div 300px only as an example. With the code above, no matter the height of the div, it will always be in the center. But I changed the div to 100%;

1

You can use another technique, with already very comprehensive support, which would be the Object-fit. This will greatly simplify your code.

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>

You can see here other values for the property and adjust as your need.

  • You don’t understand, I don’t want to put anything in pixel, my site is all responsive, if I assign in the width div and pixel height, will not be more responsive. I’m using the img inside a col-Md-4 which is in %, if I put a div in pixel, I already kill responsiveness. That’s the thing, aligning objects with pixel div is a piece of cake, but I don’t want that.

  • And from what I understood the image there in your example not this responsive, otherwise would not have the scroll

  • @Claytonfurlanetto just change to %, vh, vw, rem, in, whatever. The unit does not matter, what matters is the property object-fit attributed to the image. The scroll problem is not of the code, it is of the stackoverflow render. See that fiddle

  • Didn’t work out it’s not centered in the middle of Row, I’ll give up and control with margin msm in the medias queries.

0

Another way would be this, but very raw, not right or wrong, just a demonstration:

.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>

Writing a css structure from scratch is very laborious but the knowledge is valid, but when it comes to time and cost it takes a good team to make structures like:

The most widely used libraries today.

That’s right, good practice and good study.

Browser other questions tagged css responsive img

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