如何让我的图像在响应时保持其方形形状而不设置大量媒体查询？

Question

我已经阅读了几个关于我遇到的相同问题的答案，但 none 似乎对我有用。我有一个表单，用户可以在其中编辑或添加图像。我希望每个图像都是一个正方形，而不管设备（台式机、手机、平板电脑）如何。我没有做到这一点。在其他答案中，人们建议使用 width: 20vw 和 height: 20vh，在其他帖子中提到使用 :after，但 none 对我有用。我希望在不必为每个屏幕创建媒体查询的情况下实现这一点。

这是我需要达到的目标：

这是我的 codepen。

Answer 1

据我了解 如果你想要方形图片

您可以使宽度和高度始终相同

但是如果你总是希望它的正方形大小相同

你可以使用这样的东西

.square{
  width: 100px;
  height: 100px
}

或

.square{ width: 20vw; height: 20vw; }

.square{   width: 20vh;   height: 20vh; }