如何在纵向视图和横向视图之间保持HTML按钮的纵横比？

.button {
  width: 50%;
  height: 0;
  padding-bottom: 50%; /* 保持按钮的纵横比为1:1 */
}

@media (max-width: 600px) {
  .button {
    width: 100%;
    padding-bottom: 100%; /* 在小屏幕上保持按钮的纵横比为1:1 */
  }
}

.container {
  display: flex;
  align-items: stretch;
}

.button {
  flex: 1;
  aspect-ratio: 1/1; /* 保持按钮的纵横比为1:1 */
}

<button class="button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-12h2v6h-2zm0 8h2v2h-2z"/>
  </svg>
</button>