使用百分比填充技巧来保持纵横比会导致CSS Grid溢出 [英] Using percentage padding trick to maintain aspect ratio causes overflow in CSS Grid

问题描述

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

I am using padding-top to force the aspect ratio of a div to 16:9. The contents of the div are positioned absolutely and expand to fill the 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出于某种原因而使用网格容器。

It works nicely to achieve the aspect ratio, but the div is overflowing my CSS Grid container for some reason.

以下是该问题的有效示例： https://jsfiddle.net/uo63yyer/30/

Here is a fiddle with the working example of the problem: 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>

推荐答案

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

The problem appears to be the use of auto to size the grid column:

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

相对于宽度计算填充百分比包含的代码块（规范）。

Percentage padding is calculated with respect to the width of the containing block (spec).

无论出于何种原因，浏览器都会忽略 auto 值。

For whatever reason, the auto value is being ignored for this purpose by the browser.

如果从 auto 切换为 fr 个单位，则布局将按预期工作

If you switch from auto to fr units, the layout works as intended.

#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/

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

Also, be aware that using percentage-based padding on grid items may render differently across browsers. Percentage padding on grid item being ignored in Firefox

这篇关于使用百分比填充技巧来保持纵横比会导致CSS Grid溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！