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

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

示例说明：

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

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：CSS内容和屏幕阅读器(JAW)下一篇：css – 从R中的链接中提取标题