html - 如何使用百分比 (%) 创建纵横比为 1:1 的完美正方形

我的目标是在任何屏幕尺寸上都有一个纵横比为 1:1 的 div。

为了实现这一点，我给我的 div 设置了 50% 的宽度和 50% 的高度。我想通过给它 50% 的宽度和 50% 的高度，我可以得到一个纵横比为 1:1 的完美正方形。

嗯，我错了……

div 尊重我给它的 50% 的宽度，例如，在 200px 的屏幕尺寸上，它需要 100px 的宽度，在 500px 的屏幕尺寸上，它需要 250px 的宽度，50% 的宽度就像我指定的那样。

但是高度不尊重我给它的 50% 的高度...... ^^^再次，我假设如果我给它一个宽度和高度为 50% 的高度将与宽度相同，并且div 将是一个完美的正方形。

我如何实现我的目标？如何在使用百分比宽度和高度的同时使我的 div 成为纵横比为 1:1 的完美正方形？

标签： htmlcssheightwidthaspect-ratio