具有持续长宽比的自适应CSS网格 [英] Responsive CSS Grid with persistent aspect ratio
问题描述
我的目标是创建一个响应网格,其中包含数量未知的项目,其长宽比保持在16:9.现在看起来像这样:
My goal is to create a responsive grid with an unknown amount of items, that keep their aspect ratio at 16 : 9. Right now it looks like this:
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 160px);
grid-template-rows: 1fr;
grid-gap: 20px;
}
.item {
height: 90px;
background: grey;
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
问题是,这些项目无法随屏幕尺寸缩放,从而在正确的位置留出空白.但是,当使用以下方法使网格适应屏幕尺寸时: grid-template-columns:repeat(auto-fit,minmax(160p,1fr))
并删除 height:90px;
,则宽高比不会持久.
The problem is, that the items won't scale with the screen size, resulting in a margin at the right site. But when making the grid adapt to the screen size with e.g.: grid-template-columns: repeat(auto-fit, minmax(160p, 1fr))
and removing the height: 90px;
, the aspect ratio doesn't persist.
如果没有CSS网格,也许有更好的解决方案?(也许使用javascript)
Maybe there is a better solution without css grid? (Maybe using javascript)
推荐答案
您可以利用以下事实:百分比填充基于宽度.
You could take advantage of the fact that padding in percentages is based on width.
这篇CSS技巧文章很好地解释了这个想法:
This CSS-tricks article explains the idea quite well:
...如果您的元素宽为500像素,且填充顶部为100%,padding-top为500px.
...if you had an element that is 500px wide, and padding-top of 100%, the padding-top would be 500px.
那不是500px×500px的完美正方形吗?是的!方面比率!
Isn't that a perfect square, 500px × 500px? Yes, it is! An aspect ratio!
如果我们将元素的高度强制为零(高度:0;)并且不有任何边界.然后填充将成为盒子模型的唯一组成部分影响高度,我们将得到正方形.
If we force the height of the element to zero (height: 0;) and don't have any borders. Then padding will be the only part of the box model affecting the height, and we'll have our square.
现在想象一下,我们使用56.25%而不是100%的顶部填充.那个会发生成为完美的16:9比例!(9/16 = 0.5625).
Now imagine instead of 100% top padding, we used 56.25%. That happens to be a perfect 16:9 ratio! (9 / 16 = 0.5625).
因此,为了使各列保持宽高比:
So in order for the columns to maintain aspect ratio:
- 按照您的建议设置列宽:
网格模板列:repeat(auto-fit,minmax(160px,1fr))
-
在项目中添加一个伪元素以保持16:9的宽高比:
Add a pseudo element to the items to maintain the 16:9 aspect ratio:
.item:之前{内容:";显示:块;高度:0;宽度:0;padding-bottom:calc(9/16 * 100%);}
.item:before { content: ""; display: block; height: 0; width: 0; padding-bottom: calc(9/16 * 100%); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
grid-template-rows: 1fr;
grid-gap: 20px;
}
.item {
background: grey;
display: flex;
justify-content: center;
}
.item:before {
content: "";
display: block;
height: 0;
width: 0;
padding-bottom: calc(9/16 * 100%);
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
这篇关于具有持续长宽比的自适应CSS网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!