css – 根据高度保持率缩放方形div

参见英文答案 > Maintain div aspect ratio according to height                                    4个
我需要根据高度创建一个100%高度和宽度缩放的正方形,以便始终保持其纵横比.

示例说明:

enter image description here

方形div缩放的流行示例是根据宽度(https://spin.atomicobject.com/2015/07/14/css-responsive-square/).我想用CSS / flexBox解决这个问题,但我找不到合适的解决方案.
(IE和旧版浏览器支持并不重要)

必须有多个元素共享相同的样式.
我试过画它,但我不知道这是否有意义.单个正方形需要适合外部div,但三个正方形不应该是相同的大小 – 而是适合它们各自的外部div.

enter image description here

我想知道我是如何尝试这样做的,但很难详细说明,因为我做了很多事情 – 它们都没有真正起作用.我尝试过绝对定位,但这需要宽度.我已经尝试使用jquery计算宽度/高度 – 这需要花费很长时间 – 因为有很多条目.我已经尝试过使用高度:100%宽度:auto,它什么都没有渲染,我已经尝试了上面已经链接到的解决方案(这很棒,很遗憾,基于宽度为百分比,而不是高度). etcetcetc!

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效