Html 纯css的响应纵横比：如何填充容器'；她身高多少？

我有一个固定高度的div（带有类容器的div）（应该是动态的，事先不知道），其中包含另一个div（带有类固定纵横比的div）

我希望内部div填充容器的高度，同时保持1:1的固定纵横比

实现固定纵横比的常用技巧是利用填充：事实上，当声明填充的百分比而不是固定值时，百分比是基于所讨论元素的宽度计算的，即使我们声明的是垂直值，例如padding top或padding bottom

如果您想填充容器的宽度，而不是填充容器的高度，这使得填充成为一个很好的技巧

是否可以仅使用CSS来实现它？不用了，谢谢

理想情况下，我希望CSS单元与视口单元互补，但与容器相关。比如：

• cw（容器宽度）
• ch（集装箱高度）
• cmin（容器最小值）
• cmax（容器最大值）

那太棒了

.集装箱{
背景颜色：绿色；
高度：30vh；
}
.固定纵横比{
背景色：红色；
宽度：100%；
填充顶部：100%；
/*1:1纵横比*/
位置：相对位置；
/*如果你想要里面有文字*/
}
/*如果您希望在容器中显示文本*/
.文本{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}
一些文本

对于高度，没有类似的CSS解决方案，而对于宽度，

填充底部

除了脚本之外，我还使用了一个this技巧，在这里我放置了一个
img
，带有一个数据url SVG（也可以是Base64 png），以避免到服务器的额外往返，其大小为正方形

通过将其高度设置为
100%
，它将保持其父级，即内联块，一个正方形，并且具有
可见性：隐藏
隐藏它

堆栈片段


.container{
背景颜色：绿色；
高度：50vh；
}
.固定纵横比{
显示：内联块；
背景色：红色；
身高：100%；
位置：相对位置；
}
.固定纵横比img{
显示：块；
身高：100%；
可见性：隐藏；
}
.文本{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}

">
一些文本
将高度设置为100%，宽度设置为x%



.集装箱{
背景颜色：绿色；
高度：30vh；
}
.固定纵横比{
背景色：红色；
身高：100%；
宽度：10%；
/*1:1纵横比*/
位置：相对位置；
/*如果你想要里面有文字*/
}
/*如果您希望在容器中显示文本*/
.文本{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
}
一些文本
我的猜测是尝试使用css网格。如果没有人回答，我会试一试。这对任何高度都不起作用：谢谢，您的解决方案似乎足够好，可能只是有点粗糙：@darkbasic它很粗糙……但唯一的css:）