html – 具有持久纵横比的响应式CSS网格

概述我的目标是创建一个具有未知数量项目的响应式网格,使其宽高比保持在16：9. 现在它看起来像这样： .grid { display: grid; grid-template-columns: repeat(auto-fill, 160px); grid-template-rows: 1fr; grid-gap: 20px; }.item { height: 我的目标是创建一个具有未知数量项目的响应式网格,使其宽高比保持在16：9.
现在它看起来像这样：

.grID {    display: grID;    grID-template-columns: repeat(auto-fill,160px);    grID-template-rows: 1fr;    grID-gap: 20px; }.item {    height: 90px;    background: grey;}

<div >        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div></div>

问题是,项目不会随着屏幕尺寸而缩放,导致在正确的网站上留有余量.但是当使网格适应屏幕尺寸时,例如：网格 – 模板 – 列：重复(自动调整,最小值(160p,1fr))并移除高度：90px;,纵横比不会持久.

也许没有CSS网格有更好的解决方案？ (也许使用JavaScript)

解决方法 您可以利用填充百分比基于宽度的事实.

This CSS-tricks article很好地解释了这个想法：

…if you had an element that is 500px wIDe,and padding-top of 100%,
the padding-top would be 500px.

Isn’t that a perfect square,500px × 500px? Yes,it is! An aspect
ratio!

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.

Now imagine instead of 100% top padding,we used 56.25%. That happens
to be a perfect 16:9 ratio! (9 / 16 = 0.5625).

所以为了使列保持纵横比：

1)按照建议设置列宽：

grID-template-columns：repeat(auto-fit,minmax(160p,1fr))

2)在项目中添加一个伪元素以保持16：9的宽高比：

.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 >  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div></div>

Codepen Demo(调整大小以查看效果)

总结

以上是内存溢出为你收集整理的html – 具有持久纵横比的响应式CSS网格全部内容，希望文章能够帮你解决html – 具有持久纵横比的响应式CSS网格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。