Javascript 如何在保持内容的纵横比不变的情况下调整div的大小？

这是代码

但目前，它要么重叠，要么变得太小。我对css的理解非常有限，但我猜我需要使用适当的断点来为每个屏幕大小编写css，或者可能使用viewport调整所有内容的大小？ 使用此选项可以调整卡片堆叠的大小，但在执行此操作时，我无法正确对齐所有内容

@media only screen and (max-width: 300px) {
  .petalgrid {
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
  }
}

@media only screen and ( max-width: 400px) {
  .petalgrid {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
  }
}

---

给定的CSS代码不足以清除您的问题，所以您可以共享您的HTML代码吗？给定的CSS代码不足以清除您的问题，所以您可以共享您的HTML代码吗？