CSS Grid布局下如何按宽高比显示图片且不硬编码高度？

为什么不设置height: 100%背景图无法显示 #

这个现象是两个CSS基础规则共同作用的结果：

• 空块级元素默认高度为0：你用来承载背景图的<div>内部没有任何文本或子元素，没有高度的情况下默认渲染高度为0，自然无法展示背景。
• CSS背景图不会撑开容器：和<img>标签会自带原始尺寸撑开容器不同，背景图属于装饰属性，不会改变宿主元素的尺寸，只有容器本身有可渲染的宽高时，背景才会显示。

你设置height: 100%后，这个div会继承Grid布局分配给父元素.two的明确高度，容器有了高度，背景就正常显示了。

仅靠宽度自动适配宽高比的实现方案 #

你可以用百分比padding实现固定宽高比的方案，不需要硬编码任何高度值，原理是CSS中padding的百分比取值永远相对于父元素的宽度计算：
比如你要展示16:9比例的图片，修改.two div的样式如下：

.two div {
  width: 100%;
  padding-top: 56.25%; /* 9 ÷ 16 = 0.5625，对应16:9宽高比，按需调整数值即可 */
  background-size: cover; /* 背景图铺满容器，可根据需求调整 */
  background-position: center; /* 背景图居中显示，可根据需求调整 */
}

如果是4:3比例就替换为padding-top: 75%，2:1比例替换为padding-top: 50%，以此类推。容器宽度会自动跟随Grid列宽变化，高度会自动按比例计算，完全不需要设置固定高度。

内容的提问来源于stack exchange，提问作者user944513