获取 flexbox 中的项目以填充已大小元素的可用空间答案

【问题标题】：Get item in flexbox to fill available space of the already-sized element获取 flexbox 中的项目以填充已大小元素的可用空间
【发布时间】：2021-09-20 17:07:08
【问题描述】：

我有以下缩略图网格（指向其他页面的链接），我正在使用 flexbox 显示它们。

正如您在左侧看到的那样，由于其中一张图片的纵横比不同，因此无法正确匹配。我希望它填充整个可用空间（本质上是缩放以便填充它并“裁剪”溢出。）

容器css是这样的

display: flex;
flex-direction: row;
flex-wrap: wrap;

每个元素都有

flex-basis: 20%;

我可以添加什么 css 来获得我想要的行为？

如果它是相关的，我实际上是在 React 中执行此操作，其中元素是动态加载的，并且 css 实际上是一个 CSSProperties 对象，但在客户端它只是呈现为普通 css，所以我相信任何 css-基于的解决方案仍然有效。谢谢！

【问题讨论】：

没有看到代码有点难以帮助，我想每个“缩略图”都是一个反应组件，在这种情况下你可以设置一个固定的宽度/高度并使用 css 属性object-fit： developer.mozilla.org/en-US/docs/Web/CSS/object-fit
正如@NULLSWEΔT 提到的，如果您提供Minimal Reproducible Example 会更好。如果您想了解它是如何工作的，这也是一个可能的解决方案，您应该查看CSS: 100% width or height while keeping aspect ratio?
你试过对象拟合吗？

标签： css reactjs flexbox

【解决方案1】：

我认为您希望拉伸任何不符合 flex 容器内纵横比的元素的高度正确吗？

如果我不正确，或者这不能满足您的需求，请告诉我，我将删除此答案。

您可以只添加 20% 的最大宽度或 计算的百分比不超过 flex 容器子元素的视图宽度的 1/5。然后添加object-fit: fill。

body * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
} 

.flex-parent {
  display: flex;
  flex-wrap: wrap;
}

.flex-child {
  max-width: 20%;
  object-fit: fill;
}

<div class="flex-parent">
  <img class="flex-child" src="https://picsum.photos/300/200">
  <img class="flex-child" src="https://picsum.photos/200/200">
  <img class="flex-child" src="https://picsum.photos/200/200">
  <img class="flex-child" src="https://picsum.photos/200/200">
  <img class="flex-child" src="https://picsum.photos/200/200">
  <img class="flex-child" src="https://picsum.photos/300/200">
</div>

【讨论】：