Question

基于3个网格的尺寸为16：9的框（覆盖页面的整个宽度）应在此分区中显示图片，而不会压缩/扭曲也显示整个图片。如果图片大于框，则应根据整个尺寸覆盖整个宽度或整个高度，并相应调整另一个尺寸。

我的第一个问题是：我为网格内的每个div赋予100％的宽度，但是我应该给高度分配多少？

第二：假设我根据自己的要求进行划分，我该如何做？显示分区内的图片吗？

当前进度：我已将此网站用作参考：dabblet 并使用code，其中缩略图卡是我的div，缩略图是我的图像。

.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

您的第一期：

要检索div元素的固定16：9比率，您不应使用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

在图片元素上使用它，它将包含在其父元素中。

REACTJS-3个尺寸为16：9的基于网格的框，显示图片失真

1 个答案: