使用Bootstrap中心图像位置绝对

时间:2016-04-30 02:32:25

标签: html css image twitter-bootstrap responsive-design

我试图尽可能地重新创造一切。 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/

我的问题:我想让图像居中。因为在我的项目中,img总是不同的/随机的,我无法确定它的高度/宽度。只是说我不希望它高于450px。

它可以进入上面的div。这是我想要实现的目标。

1 个答案:

答案 0 :(得分:3)

试用此代码:

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