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

Navigation
-2

Person what is the best way to centralize a responsive image within a div that is responsive in% (in this case a row), ie that it has no measures defined in pixels, with max-width: 100% for example. If anyone knows, I wanted to know to align horizontally and vertically, I've tried all of these below but the image does not center in the middle of the 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% );}
    
asked by anonymous 07.11.2017 / 16:09

3 answers

1

You can use another well-supported technique that would be 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>

Youcan view here other values for the property and adjust it as needed.

    
07.11.2017 / 16:41
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>
    
07.11.2017 / 16:18
0

Another form would be this, but rather crude, 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 a lot of work but knowledge is valid, but when you talk about time and cost you need a good team to do structures like:

The most popular libraries nowadays.

That's it, good practice and good study.

    
07.11.2017 / 17:40
DateTime does not update in Console.WriteLine [closed] Open system32 programs by C # [closed]