css - REACTJS - 3 个基于网格的大小为 16 的框 :9 , 显示图片失真

Question

3 个基于网格的框，大小为 16:9，覆盖整个页面宽度，应在不压缩/扭曲的情况下按此分区显示图片，同时显示完整图片。如果图片比盒子大，那么它应该覆盖整个宽度或整个高度，具体取决于哪个尺寸更大，并相应地调整另一个尺寸的大小。

我的第一个问题是: 我为网格内的每个 div 分配了 100% 的宽度，但是我应该分配多少高度尺寸？

第二:假设我根据我的要求进行了划分，我该怎么做 显示分区内的图片？。

目前进展: 我已经使用这个网站作为引用:dabblet 并使用 code其中 thumbnail-card 是我的 div，thumbnail 是我的图像。

.thumbnail-card {
  height: 300px;
  width: 100%;
  background-color: black;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.thumbnail-card:before {
  content: "";
  width: 1px;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: -1px;
}

.thumbnail {
  max-height: 100%;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

但垂直长图像的行为不符合我的需要。任何解决方案？ 图片引用:vertical_pic horizontal_pic how it looks

Answer 1

您的第一期:

要获取恒定的 16:9 比率的 div 元素，您不应使用 height，而应使用 padding-bottom。将 16:9 的比例转换为百分比。在您的情况下，宽度为 100%。然后计算 padding-bottom:9/16 * 100 是 16 的 56,25%。

像这样:

div {
  width: 100%;
  padding-bottom: 56,25%;
}

另请参阅此堆栈溢出帖子:Maintain the aspect ratio of a div with CSS

您的第二期:

我认为 object-fit: contain; 是您需要的:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

在图像元素上使用它，它将包含到其父级。