使用百分比填充技巧来保持纵横比会导致 CSS 网格溢出

Question

我正在使用 padding-top 将 div 的宽高比强制为 16:9。 div 的内容绝对定位并扩展以填充 div.

HTML:

<div class = "ratio-16-9">
  <p>This p element is in a div with an aspect ratio of 16:9.</p>
</div>

CSS:

.ratio-16-9 {
  padding-top:56.25% /* Yields 16:9 aspect ratio. */;
  position:relative;
}

.ratio-16-9 > p {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

实现纵横比效果很好，但是 div 由于某种原因溢出了我的 CSS 网格容器。

这是一个 fiddle 问题的工作示例：https://jsfiddle.net/uo63yyer/30/

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

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: #404040;
  min-height: 100%;
  width: 100%;
}

p {
  color: #f0f0f0;
  text-align: center;
}

#content {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

.topic {
  background-color: #808080;
  min-height: 100px;
  margin: 8px;
  padding: 8px;
}

.ratio-16-9 {
  background-color: #0080f0;
  padding-top: 56.25%;
  /* If you comment out the line above and uncomment the line below, things work propperly, but the aspect ratio is not maintained. */
  /*height:300px;*/
  position: relative;
}

.ratio-16-9>p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

<div id="content">

  <div class="topic">
    <div class="ratio-16-9">
      <p>This p element is in a div with an aspect ratio of 16:9.</p>
    </div>
  </div>

  <div class="topic">
  </div>

  <div class="topic">
  </div>

  <div class="topic">
    <div>
      <!-- Uncomment the line below and things work propperly. -->
      <!--<p>This p element is in a propperly sized div and it works as one might expect it to.</p>-->
    </div>
  </div>

</div>

Answer 1

问题似乎是使用 auto 调整网格列的大小：

#content {
  display:grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}

百分比填充是根据包含块 (spec) 的宽度计算的。

出于某种原因，浏览器为此忽略了 auto 值。

如果您从 auto 切换到 fr 单位，布局将按预期工作。

#content {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows:auto auto auto auto;
}

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

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: #404040;
  min-height: 100%;
  width: 100%;
}

p {
  color: #f0f0f0;
  text-align: center;
}

#content {
  display: grid;
  /* grid-template-columns:auto; */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
}

.topic {
  background-color: #808080;
  min-height: 100px;
  margin: 8px;
  padding: 8px;
}

.ratio-16-9 {
  background-color: #0080f0;
  padding-top: 56.25%;
  /* If you comment out the line above and uncomment the line below, things work propperly, but the aspect ratio is not maintained. */
  /*height:300px;*/
  position: relative;
}

.ratio-16-9>p {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

<div id="content">
  <div class="topic">
    <div class="ratio-16-9">
      <p>This p element is in a div with an aspect ratio of 16:9.</p>
    </div>
  </div>
  <div class="topic"></div>
  <div class="topic"></div>
  <div class="topic">
    <div>
      <!-- Uncomment the line below and things work propperly. -->
      <!--<p>This p element is in a propperly sized div and it works as one might expect it to.</p>-->
    </div>
  </div>
</div>

https://jsfiddle.net/uo63yyer/31/

另外，请注意，在网格项目上使用基于百分比的填充可能会在不同浏览器中呈现不同的效果。

使用百分比填充技巧来保持纵横比会导致 CSS 网格溢出

Using percentage padding trick to maintain aspect ratio causes overflow in CSS Grid

css

grid-layout

css-grid