Karuw Karuw - 7 months ago 27
HTML Question

Center image position absolute with Bootstrap

I tried to recreate everything as good as possible. CSS:

.container-fluid-max {
max-width: 1440px;
height: 300px;
background-color: black;
margin: 30px 0;
}
.bg-img{
margin: 0px;
padding: 0px;
height:300px;
border: 3px 0 solid $b-black;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.bg-img img{
max-height:450px;
position:absolute;
bottom: 0px;
}


https://jsfiddle.net/DTcHh/19984/

My problem: I am trying to get the image to be centered. Since in my project, the img is always a different/random one, I cannot really tell what height/width it does have. Just saying I dont want it to be higher than 450px.

And it's okay that it's entering the div above. That's something I want to achieve.

Answer

Try this Code:

.bg-img img{
  max-height:450px;
  position:absolute;
  bottom: 0px;
 left:0;
  right:0;
  margin:0 auto
}