Bootstrap 带有 img 的方形图块

Question

我想创建带有 bootstrap col-*-* classes（适当大小）的方形图块，其中包含背景图像和一些文本。

现在我使用虚拟块

margin-top: 100%

后面是内容块：

position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;

但是当我为那个块设置背景图像时，它变得非常难看，所以我认为我应该使用标签来正确调整图像大小。

所以我试着让 class 像 bgimage:

width: 100%;
object-fit: cover;

我还设置了 overflow: hidden 到父块，但这没有帮助，图像变得很好，但现在它从我的块中消失了。

现在我有两个问题：

有没有更好的方法将图片设置为方形块中的背景以覆盖它？
如何为这些块做适当的padding和margin（top,left,bottom,right设置没有别的办法？需要在小设备上调整大小）？

Answer 1

如果你给出了例子，就很容易给出你的问题的解决方案。

要适合图像，您可以使用 img-responsive class of bootstrap。或者使用这个：

body {
    background-color: black;
    background: url(img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

如果你对Bootstrap网格有正确的认识，那么你就可以随心所欲地设计自己的方块。您可以从 this.

获得帮助

Answer 2

在方形缩略图内设置带文字的背景图片。您需要再添加一个 div，其中 position: absolute 和 background-size: cover

查看 CODEPEN

处的示例代码

HTML:

<div class="container">
  <div class="row">

    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section1</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section2</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section3<br>para2</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section4</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section1</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section2</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section3<br>para2</a>
      <div class="square-img"></div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="margin-top"></div>
      <a href="#x" class="square-text">Section4</a>
      <div class="square-img"></div>
    </div>

  </div>
</div>

CSS:

.margin-top {
  margin-top: 100%;
}

.square-text {
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 15px;
  right: 0;
  text-align: center;
  padding-top: calc(50% - 30px);
  z-index: 9;
  background: transparent;
  color: #fff;
}

.square-img {
  background: url('http://www.themdfactor.com/wp-content/uploads/2015/11/image7.jpg') no-repeat;
  position: absolute;
  top: 15px;
  bottom: 20px;
  left: 15px;
  right: 0;
  background-size: cover;
}

希望对你有帮助享受:)

Bootstrap 带有 img 的方形图块

Bootstrap squared tiles with imgs

html

css

tiles

image

twitter-bootstrap