html - 带有 imgs 的 Bootstrap 方形瓷砖

Question

我想创建带有 Bootstrap col-*-* 类(适当大小)的方形图 block ，其中包含背景图像和一些文本。

现在我使用虚拟 block

margin-top: 100%

后面是内容 block :

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

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

所以我尝试制作像 bgimage 这样的类:

width: 100%;
object-fit: cover;

我还设置了溢出:隐藏到父 block ，但这没有帮助，图像变得很好，但现在它从我的 block 中消失了。

现在我有两个问题:

1. 是否有更好的方法将图像设置为方形 block 中的背景以覆盖它？

2. 如何为这些 block 做适当的填充和边距(上、左、下、右设置，没有其他方法？需要在小设备上调整大小)？

Answer 1

在方形缩略图内设置带有文本的背景图像。您需要再添加一个 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;
}

希望对你有帮助 享受:)