html - flexbox中的元素和图像定位

Question

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

当我添加图像时，我在图像后面仍然可见背景存在一些问题 - 就好像图像没有覆盖整个框一样。

很难解释。此外，它似乎只在 Chrome 中。然而，在 Firefox 中，图像上方的（绿色）标题栏并没有完全贴在底部。看到这个小提琴。

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%;
}

标签： htmlcssflexbox

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>