如何强制 CSS 中的图像服从父 flexbox 部分高度？答案

【问题标题】：How do I force an image in CSS to obey parent flexbox section height?如何强制 CSS 中的图像服从父 flexbox 部分高度？
【发布时间】：2021-07-12 13:24:03
【问题描述】：

这个问题已经说得很清楚了： Flexbox - Img height conflict ...但是：就我而言，接受的答案并不是那么有用。

解决方案 #1：绝对 - 相对。这在大小方面效果很好，但会影响 ZIndex。这不是我想要的副作用，因为它确实破坏了我的网站，因为我有很多重叠的元素。

解决方案 2#：min-height: 0 & height: 100& 答案几乎完全没用，与绝对 pos 相比，它有点帮助，但仍然不存在。东西。

有没有办法实现一个垂直的 flexbox，有 2 个大小相等的部分，其中一个包含一个 Img？

这是一个 sn-p 期望的结果。如您所见，大小调整效果很好，但 zindex 没有，黄色 div 也应该覆盖图像。

img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cattainer{
  display: flex;
  background: blue;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.overlay{
  flex: 1;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}

.overlayItem{
  grid-area: 1/1/auto/auto;
}

<html style="height: 100%; width: 100%">
   <head></head>
   <body style="
       width: 100%;
       height: 100%;
       display: flex;
      ">
         
      <div class="overlay">
        
         <div class="overlayItem" style="display: flex;flex: 1;background: blue;flex-direction: column;">
           <div style="background: red;flex: 1;"></div>
           <div class="cattainer">
              <img src="https://cdn.mos.cms.futurecdn.net/VSy6kJDNq2pSXsCzb6cvYF.jpg" >
           </div>
        </div>
        
        <div class="overlayItem" style="background: yellow;flex: 1;"></div>
      </div>
   </body>
</html>

【问题讨论】：

对象拟合：包含；到img？

标签： html css image flexbox

【解决方案1】：

你可以使用：

img {
  object-fit: cover;
}

虽然您的示例图片非常大，但为 2800 像素 X 1575 像素。可能想要使用尺寸更接近盒子尺寸的图像？只是一个想法。

【讨论】：