css - 基于容器高度的项目

Question

我有一张漂亮的小桌子，里面有 4 个包含图像的元素。

图片通常由用户上传，因此我无法精确控制图片大小。

我要做的是创建一个 2 x 2 布局，调整大小以适应用户屏幕，并且布局中的每个框都具有 16:9 的纵横比。

这对调整窗口宽度非常有效，但如果用户调整高度，元素会溢出，而不是调整高度以适应用户屏幕。

您可以在此处查看示例，如果您调整屏幕，水平宽度行为就是我正在寻找的，但垂直调整会在较小的窗口尺寸上隐藏图像。 https://codepen.io/anon/pen/zaXEOL

.outer-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: 70vh;
  max-width: 70vw;
  overflow: hidden;
}

.holder {
  border: 1px solid red;
  max-width: 46%;
  max-height: 46%;
  margin: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  padding-top: 26%;
  width: 100%;
  position: relative;
}

img {
  object-fit: contain;
  max-height: 100%;
  top: 0;
  max-width: 100%;
  width: 100%;
  height: 100%

<div class="outer-grid">
  <div class="holder">
    <img src="http://fillmurray.com/200/300"/>
  </div>
   <div class="holder">
    <img src="http://fillmurray.com/300/300"/>
  </div>
     <div class="holder">
    <img src="http://fillmurray.com/300/200"/>
  </div>
     <div class="holder">
    <img src="http://fillmurray.com/250/300"/>
  </div>
</div>

我使用的 css 相当简单

.outer-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  grid-gap: 1rem;
  max-height: 70vh;
  max-width: 70vw;
  overflow: hidden;
}

.holder {
  border: 1px solid red;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  padding-top: 56%;
  position: relative;
}

img {
  position: absolute;
  display: block;
  top: 0;
  max-height: 100%;
  max-width: 100%;
}

标签： cssgridresponsivecss-grid

Answer 1

首先，请注意您的布局在 Firefox 和 Edge中根本不起作用。这是因为您使用的百分比填充技巧在应用于网格容器时，不适用于所有浏览器。这是一个详细的解释：Percentage padding / margin on grid item ignored in Firefox

其次，百分比填充根据图像宽度重新调整图像大小。这就是全部技巧。

从规范：

§ 8.4 填充属性：padding-top, padding-right, padding-bottom, padding-left, 和 padding

<percentage>

百分比是根据生成框的包含块的宽度padding-top计算的，即使对于和 也是 如此padding-bottom。

图像可以在水平轴上重新调整大小，因为百分比填充与宽度相关联。它们无法在垂直轴上重新调整大小，因为百分比填充与高度无关。