动态缩放网页列表元素以使其具有100％的宽度和相等的缩放高度

Question

我正在学习如何创建一个表以使用HTML在列表中显示可搜索的数据。我将其分为两列，并希望元素缩放到屏幕尺寸。如果可能的话，我想让元素的宽度将网页的宽度除以一半，然后将其高度缩放到使元素变成正方形的宽度。我目前已经缩放了宽度，但是我的修复方法使两列重叠，并产生了其他一些问题。我也想不出如何使高度与宽度之比为1：1。这是我正在使用的修改后的w3school代码： https://www.w3schools.com/code/tryit.asp?filename=FZRZ717W4LB3。

Answer 1

下面是我多一点努力，如果任何人有此布局类似愿望的解决方案：https://www.w3schools.com/code/tryit.asp?filename=FZS3SPUN6GOH。