Question

我创建了一个位于Bootstrap框架内的盒子。该框是使用flexbox创建的，以便使其在各种屏幕尺寸下都具有灵活性。

添加图像时，我仍然遇到一些问题，即背景在图像的后面仍然可见-好像图像没有覆盖整个盒子。

很难解释。此外，它似乎仅在Chrome中。但是，在Firefox中，图像上方的（绿色）标题栏并没有完全粘在底部。参见此fiddle。

HTML：

<div class="container">
  <div class="row">
    <div class="col">
      <div class="gridbox">
        <div class="box1">
          <div class="header">Left box</div>
        </div>
        <div class="box2"><img src="https://picsum.photos/550/300?image=1" alt="550x300"></div>
      </div>
    </div>
    <div class="col">
      <div class="gridbox">
        <div class="box1">
          <div class="header">Right box</div>
        </div>
        <div class="box2"><img src="https://picsum.photos/550/300?image=2" alt="550x300"></div>
      </div>
    </div>
  </div>

Css（已删除供应商前缀）：

.gridbox {
  height: 133px;
  background-color: #f90;
  position: relative;
  display: flex;
  width: 100%;
  line-height: 1.5;
  flex-direction: column;
  border-radius: 2px;
  flex-direction: column;
}

.box1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  flex: 1;
  order: 1;
  z-index: 4;
}

.header {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(133, 174, 51, 0.83);
  color: #fff;
  padding: 3px 5px;
}

.box2 {
  padding: 5px 10px 10px;
  order: 2;
  flex: 1 1 auto;
}

.gridbox .box2 img {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  display: block;
  min-height: 100%;
  filter: brightness(100%) blur(0);
  -ms-interpolation-mode: bicubic;
  transform: translateX(-50%) translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

.gridbox:hover img {
  filter: brightness(90%) blur(0);
}

body,
html {
  height: 100%;
}

Answer 1

我不知道是否理解得很好，但是您可以尝试一下。

.col{
  overflow:hidden;
}
.gridbox {
  height: 133px;
  background-color: #f90;
  position: relative;
  display: flex;
  width: 100%;
  line-height: 1.5;
  flex-direction: column;
  border-radius: 2px;
  flex-direction: column;
}

.box1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  flex: 1;
  order: 1;
  z-index: 4;
}

.header {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(133, 174, 51, 0.83);
  color: #fff;
  padding: 3px 5px;
}

.gridbox .box2 {
  order: 2;
  flex: 1 1 auto;
}

.gridbox .box2 img {
  
  width:100%;
  max-width: 100%;
  height: 133px;
  position: relative;
  top: 0;
  bottom: 0;
  object-fit:cover;

  display: block;
  min-height: 100%;
  filter: brightness(100%) blur(0);
  -ms-interpolation-mode: bicubic;

  -webkit-backface-visibility: hidden;
}

.gridbox:hover img {
  filter: brightness(90%) blur(0);
}

body {
  padding: 20px 10px;
}

body,
html {
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      <div class="gridbox">
        <div class="box1">
          <div class="header">Left box</div>
        </div>
        <div class="box2"><img src="https://picsum.photos/550/300?image=1" alt="550x300"></div>
      </div>
    </div>
    <div class="col">
      <div class="gridbox">
        <div class="box1">
          <div class="header">Right box</div>
        </div>
        <div class="box2"><img src="https://picsum.photos/550/300?image=2" alt="550x300"></div>
      </div>
    </div>
  </div>

flexbox中的元素和图像定位

1 个答案: