Html flexbox中的元素和图像定位

我已经创建了一个位于引导框架内的框。该框是使用flexbox创建的，以使其在各种屏幕尺寸中具有灵活性

当我添加一个图像时，我发现图像后面的背景仍然可见，好像图像没有覆盖整个盒子一样

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

Html:

---

我不知道你是否理解，但你可以试试这个

.col{
溢出：隐藏；
}
.网格盒{
高度：133px；
背景色：#f90；
位置：相对位置；
显示器：flex；
宽度：100%；
线高：1.5；
弯曲方向：立柱；
边界半径：2px；
弯曲方向：立柱；
}
.box1{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
弹性：1；
顺序：1；
z指数：4；
}
.标题{
宽度：100%；
溢出：隐藏；
空白：nowrap；
背景：rgba（133,174,51,0.83）；
颜色：#fff；
填充物：3px 5px；
}
.gridbox.box2{
顺序：2；
flex:1自动；
}
.gridbox.box2 img{
宽度：100%；
最大宽度：100%；
高度：133px；
位置：相对位置；
排名：0；
底部：0；
对象匹配：覆盖；
显示：块；
最小高度：100%；
滤镜：亮度（100%）模糊（0）；
-ms插值方式：双三次插值；
-webkit背面可见性：隐藏；
}
.网格框：悬停img{
滤镜：亮度（90%）模糊（0）；
}
身体{
填充：20px 10px；
}
身体
html{
身高：100%；
}

左框
右框

您的高度固定，但宽度灵活。这意味着，由于图像的纵横比，图像不能始终与方框一致。使用

object-fit

实际上似乎有帮助。但有时，在某些窗口大小或调整浏览器大小时，图像似乎无法覆盖整个flex box。可能是浏览器的渲染缺陷。不管怎样，你的建议使它变得更好。谢谢

<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>

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