强制 flexbox 容器内的图像填充/覆盖 100%

Posted 2023-03-05

【中文标题】强制 flexbox 容器内的图像填充/覆盖 100%

【英文标题】：Force image inside flexbox container to fill/cover 100%

【发布时间】：2017-06-20 16:12:39

【问题描述】：

我对编码比较陌生，需要您的帮助。

这是代码笔： http://codepen.io/anon/pen/NdMjZy

 <div class="flex-item w50 fill">
    <div class="flex-inner portfolio">
       <a href="">
          <img src="" >
       </a>
    </div>
 </div>

我需要什么：图像应该填充/覆盖弹性项目容器。它们应该居中并保持纵横比。

您可以看到带有椅子的图像不是 100% 高度。

我尝试使用 imagefill.js，但结果是 0px 高度 flex-items。

提前谢谢你！

【参考方案1】：

您可以为您的img 设置object-fit: cover。您的 a 元素必须是弹性框才能使 object-fit 工作。请注意：我只是将 resize: both; 添加到 .flex-inner 以用于演示。您可以调整.flex-inner 的大小以查看效果

.flex-inner 
  width: 200px;
  height: 200px;
  resize: both;
  overflow: auto;


.flex-inner a 
  display: flex;
  width: 100%;
  height: 100%;
  border: solid 1px #123;


img 
  object-fit: cover;
  width: 100%;

<div class="flex-inner">
  <a href="">
    <img src="http://via.placeholder.com/500x200" >
  </a>
</div>

【参考方案2】：

这里和其他地方提到的所有方法都没有有效地工作。我有 52 个 Flex 盒子，排列成 13 x 4，每个盒子里面都有一个 6 x 6 厘米尺寸的图像。 对我有用的是针对 <a> 元素：

.container nav ul li a 

    display: block;
    border: 10px solid yellow;
    border-radius: .5em;
    padding: 0 0;
    margin: .2em;