我使用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 Grid容器.
这是问题的工作示例的小提琴：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来调整网格列的大小：
#content {
display:grid;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto;
}
百分比填充是相对于包含块的宽度(spec)计算的.
无论出于何种原因,浏览器都会为此目的忽略自动值.
如果从自动切换到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,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/
此外,请注意,在网格项上使用基于百分比的填充可能会在浏览器中呈现不同的方式. Percentage padding on grid item being ignored in Firefox
