Question

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

以下是codepen： http://codepen.io/anon/pen/NdMjZy

$i

我需要的是：图像应该填充/覆盖flex-item容器。它们应该居中并保持长宽比。

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

我尝试使用imagefill.js，但这导致了0px高度的flex-items。

提前谢谢！

Answer 1

您可以为object-fit: cover设置img。您的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" alt="">
  </a>
</div>

Answer 2

这里和其他地方提到的所有方法都无法有效地工作。我有52个Flex盒子，对齐13 x 4，每个盒子内部有一张6 x 6 cm尺寸的图像。对我有用的是针对<a>元素：

.container nav ul li a {

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

强制Flexbox容器内的图像填充/覆盖100％

2 个答案: