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%;
}

Answer 1

首先，请注意，your layout在Firefox和Edge中根本不起作用。这是因为当您将百分比填充技巧应用到网格容器中时，并不能在所有浏览器中使用。以下是详细说明： Percentage padding / margin on grid item ignored in Firefox

第二个填充百分比根据图像的 width 调整图像的大小。这就是整个窍门。

根据规范：

§ 8.4 Padding properties: padding-top, padding-right, padding-bottom, padding-left, and padding

<percentage>

相对于广告的宽度计算百分比   生成的框的包含块，即使对于padding-top和   padding-bottom。

由于百分比填充与宽度相关联，因此图像可以在水平轴上调整大小。由于百分比填充与高度没有关联，因此无法在垂直轴上调整大小。

基于容器高度的项目

1 个答案: