【问题标题】:Center image position absolute with Bootstrap使用 Bootstrap 绝对居中图像位置
【发布时间】:2016-08-25 07:21:44
【问题描述】:

我试图尽可能地重建一切。 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也没问题。这就是我想要实现的目标。

【问题讨论】:

  • 你能用 flexbox 做吗?这个工作吗jsfiddle.net/DTcHh/19985
  • ' 位置:绝对;左:50%;最高:50%;'
  • 你已经定义了 col-xs-12 并且它占据了整个屏幕,所以你可能想试试 col-xs-10 col-xs-offset-1 或 col-xs-8 col-xs- offset-2 使元素居中

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


【解决方案1】:

试试这个代码:

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

【讨论】:

  • 另外一件事我忘了说。如果我调整到更小的宽度(通过调整浏览器的大小),我会在底部到左右两侧得到一个滚动按钮。我该如何避免呢?有什么想法吗?
  • 我在 FF 和 Chrome 浏览器上的宽度:320px 上没有滚动条......在 jsfiddle 中总是显示滚动条。你用什么浏览器?
猜你喜欢
  • 2012-04-17
  • 1970-01-01
  • 2012-02-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-05-27
  • 2014-05-25
  • 2012-06-26
相关资源
最近更新 更多